@import url(music.css); @import url(saying2.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{ width: 500px; height: 400px; } */ .container1>div{ position: absolute; } .container1>div:first-child{ top: 185px; left: 50px; } .container1>div:last-child{ top: 180px; right: 65px; } .container1>div:first-child>img{ width: 110px; height: 140px; cursor: pointer; transition: 0.3s ease-in-out; } .container1>div:first-child:hover>img{ transform: scale(1.2); } .container1>div:last-child>img{ width: 150px; height: 150px; cursor: pointer; transition: 0.3s ease-in-out; } .container1>div:last-child:hover>img{ transform: scale(1.2); } .word-container { position: relative; margin: auto; width: 280px; height: 70px; background: url("../imags/word2/back3.jpg") no-repeat center center; background-size: 100% 100%; top:370px } .word { width: 240px; height: 100%; margin: auto; } #word1, #word2, #word3, #word4 { float: left; width: 60px; height: 60px; margin-left: 14px; } #word1{ background: url("../imags/word2/word3-1.jpg") no-repeat center bottom; background-size: 100% 60%; } #word2{ background: url("../imags/word2/word3-2.jpg") no-repeat center bottom; background-size: 100% 60%; } #word3{ background: url("../imags/word2/word3-3.jpg") no-repeat center bottom; background-size: 100% 60%; } .container2{ position: relative; top:370px } .container2_1{ margin: auto; padding: auto; width: 320px; height: 90px; background: url("../imags/background/a2.png") no-repeat; background-size: 310px 90px; /*必须设置大小*/ } .container2_1>div:first-child{ position: absolute; top: 20px; left: 50px; } .container2_1>div:first-child>p{ font-size: 32px; font-family: 'SONG'; font-weight: 400; color: white; line-height: 40px; letter-spacing: 8px; margin-left: 18px; margin-top: 5px; } .container2_1>div:last-child{ position: absolute; top: 20px; right: 50px; } .container2_1>div:last-child>p{ font-size: 20px; font-family: '楷体'; color: white; line-height: 40px; /* letter-spacing: 5px; */ margin-right: 13px; margin-top: 5px; } .container2_2{ margin-left: 40px; padding: auto; width: 320px; height: 90px; background: url("../imags/background/a1.png") no-repeat; background-size: 310px 90px; /*必须设置大小*/ position: relative; } .container2_2>div:first-child{ position: absolute; top: 20px; left: 10px; } .container2_2>div:first-child>p{ font-size: 32px; font-family: 'SONG'; font-weight: 400; color: white; line-height: 40px; letter-spacing: 8px; margin-left: 18px; margin-top: 5px; } .container2_2>div:last-child{ position: absolute; top: 20px; right: 90px; } .container2_2>div:last-child>p{ font-size: 20px; font-family: '楷体'; color: white; line-height: 40px; /* letter-spacing: 5px; */ margin-right: 13px; margin-top: 5px; } .container2_3{ margin-left: 35px; padding: auto; width: 320px; height: 90px; background: url("../imags/background/a2.png") no-repeat; background-size: 310px 90px; /*必须设置大小*/ position: relative; } .container2_3>div:first-child{ position: absolute; top: 20px; left: 15px; } .container2_3>div:first-child>p{ font-size: 32px; font-family: 'SONG'; font-weight: 400; color: white; line-height: 40px; letter-spacing: 8px; margin-left: 18px; margin-top: 5px; } .container2_3>div:last-child{ position: absolute; top: 20px; right: 65px; } .container2_3>div:last-child>p{ font-size: 20px; font-family: '楷体'; color: white; line-height: 40px; /* letter-spacing: 5px; */ margin-right: 13px; margin-top: 5px; } .container2_4{ margin-left: 40px; padding: auto; width: 320px; height: 90px; background: url("../imags/background/a1.png") no-repeat; background-size: 310px 90px; /*必须设置大小*/ position: relative; } .container2_4>div:first-child{ position: absolute; top: 20px; left: 10px; } .container2_4>div:first-child>p{ font-size: 32px; font-family: 'SONG'; font-weight: 400; color: white; line-height: 40px; letter-spacing: 8px; margin-left: 18px; margin-top: 5px; } .container2_4>div:last-child{ position: absolute; top: 20px; right: 60px; } .container2_4>div:last-child>p{ font-size: 20px; font-family: '楷体'; color: white; line-height: 40px; /* letter-spacing: 5px; */ margin-right: 22px; margin-top: 5px; } .back img { position: absolute; top: 0px; left: 5px; width: 80px; cursor: pointer; }