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