* { margin: 0; padding: 0; } #ul1 { position: relative; margin: 0px auto; overflow: hidden; } #ul1 li { list-style: none; background-color: #164778; box-shadow: 0px 0px 3px 1px #ccc; z-index: 10 !important; } body { text-align: center; background-color: #86a7c5; } .box0 { width: 70px; height: 70px; background: url(../images/1.png) no-repeat; background-size: cover; float: left; } .box1 { width: 70px; height: 70px; background: url(../images/2.png) no-repeat; background-size: cover; float: left; } .box2 { width: 70px; height: 70px; background: url(../images/3.png) no-repeat; background-size: cover; float: left; } .box3 { width: 70px; height: 70px; background: url(../images/4.png) no-repeat; background-size: cover; float: left; } .box4 { width: 70px; height: 70px; background: url(../images/5.png) no-repeat; background-size: cover; float: left; } .box5 { width: 70px; height: 70px; background: url(../images/6.png) no-repeat; background-size: cover; float: left; } .top { display: flex; color: #fff; justify-content: center; align-items: center; height: 30px; } .left { margin-right: 50px; } .end { display: none; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } .end>div { color: #fff; font-size: 24px; } .end .btn { cursor: pointer; margin: 30px auto 0; display: flex; justify-content: center; align-items: center; width: 275px; height: 75px; background: url('../images/btn.png'); background-size: 100% 100%; padding-right: 20px; } .endImg{ width: 300px; } .endImg img{ width: 300px; } .zhezao { display: flex; justify-content: center; align-items: center; align-items: center; z-index: 999; background-color: rgba(0, 0, 0, .7); position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .btnGo { cursor: pointer; font-size: 24px; color: #fff; display: flex; justify-content: center; align-items: center; width: 230px; height: 61px; background: url('../images/btn.png'); background-size: 100% 100%; padding-right: 20px; } /* 适配手机端 */ @media screen and (max-width: 600px) { #ul1 { width: 100vw !important; height: 100vh !important; } #ul1 li { width: calc(100vw / 7); height: calc(100vw / 7); } }