@import url(music.css); @import url(saying.css); * { margin: 0; padding: 0; } #container { width: 390px; height: 844px; margin: 0px auto; background: url('../imags/background/back3.png') no-repeat; background-size: 390px 844px; /* border: 1px solid rgb(240, 7, 7); */ position: relative; border-radius: 30px; } .container1 { position: absolute; left: 70px; top: 180px; /* border: 1px solid rgb(240, 7, 7); */ } .container1 p { font-family: 'SONG'; font-size: 20px; color: black; text-align: center; line-height: 30px; letter-spacing: 5px; } .container1 p span { color: rgb(116, 48, 67);; } .container2 { position: absolute; left: 90px; top: 350px; /* border: 1px solid rgb(240, 7, 7); */ } .container2>div>img { width: 200px; height: 160px; } .container3 { position: absolute; left: 105px; bottom: 80px; /* border: 1px solid rgb(240, 7, 7); */ } .container3>div:first-child { /* border: 1px solid rgb(240, 7, 7); */ margin-left: 10px; } .container3>div:nth-child(2) { /* border: 1px solid rgb(240, 7, 7); */ margin-left: 10px; } .container3>div:last-child { /* border: 1px solid rgb(240, 7, 7); */ margin-left: 10px; } .container3>div>img { width: 150px; height: 70px; cursor: pointer; /*鼠标手型改变*/ transition: 0.3s ease-in-out; /*过渡时间:持续的时间 规定以慢速开始和结束,先加速后减速效果*/ } .container3>div>img:hover { transform: scale(1.2); } #correct, #wrong { position: absolute; z-index: 100; left: 50%; transform: translateX(-50%); bottom: 500px; } .back img { position: absolute; top: 0px; left: 5px; width: 80px; cursor: pointer; } .go img { position: absolute; width: 100px; cursor: pointer; bottom: 0px; right: 10px; }