#2 fei.css

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;

position: absolute;
left: 70px;
top: 180px;
/* border: 1px solid rgb(240, 7, 7); */

font-family: 'SONG';
font-size: 20px;
color: black;
text-align: center;
line-height: 30px;
letter-spacing: 5px;

color: rgb(116, 48, 67);;

position: absolute;
left: 90px;
top: 350px;
/* border: 1px solid rgb(240, 7, 7); */

width: 200px;
height: 160px;

position: absolute;
left: 105px;
bottom: 80px;
/* border: 1px solid rgb(240, 7, 7); */

/* border: 1px solid rgb(240, 7, 7); */
margin-left: 10px;

/* border: 1px solid rgb(240, 7, 7); */
margin-left: 10px;

/* border: 1px solid rgb(240, 7, 7); */
margin-left: 10px;

width: 150px;
height: 70px;
cursor: pointer;
/*鼠标手型改变*/
transition: 0.3s ease-in-out;
/*过渡时间：持续的时间  规定以慢速开始和结束，先加速后减速效果*/

transform: scale(1.2);

position: absolute;
z-index: 100;
left: 50%;
transform: translateX(-50%);
bottom: 500px;

position: absolute;
top: 0px;
left: 5px;
width: 80px;
cursor: pointer;

position: absolute;
width: 100px;
cursor: pointer;
bottom: 0px;
right: 10px;

@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; }