qq音乐！

最新推荐文章于 2025-04-27 11:12:54 发布

芋泥波波.

最新推荐文章于 2025-04-27 11:12:54 发布

阅读量303

点赞数 5

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/2302_80058560/article/details/140016653

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>QQ音乐</title>
       <style>
           {
               padding: 0;
               margin: 0;
           }
           .Bigbox{
               height:100px;
               width:100%;
               border:1px solid white;
               margin: auto;
               }
           .Lbox{
               height: 100px;
               width:700px;
               border:1px solid white;
               /* margin-left: 0; */
               display: flex;
               /* font-size: 100px; */
           }
           .lbox
           {
           height: 100px;
           width:200px;
           border:1px solid white;
           font-size:18px;
           line-height:80px;
           /* margin: auto; */
           }
           input:focus{
               outline: none;
           }
           .lbox:hover{
               color: aquamarine;
           }
           .rbox{
               height:50px;
               width:200px;
               border:1px solid black;
               margin-left:750px;
               margin-top: -88px;
               display: flex;
               font-size: 15px;
               text-align: center;
               line-height:45px;
               input:focus{
                   outline: none;
               }
               .rbox:hover{
                   color: aquamarine;
               }
           }
           .R1box{
           height:75px;
           width: 100px;
           border:1px solid white;
           margin-left: 970px;
           margin-top: -42px;
           font-size:18px;
           }
           input:focus{
               outline: none;
           }
           .R1box:hover{
               color: aquamarine;
           }
           .sbox
           {
           height:50px;
           width: 150px;
           border:1px solid white;
           margin-left:1020px;
           margin-top: -85px;
           font-size: 18px;
           text-align: center;
           border: 1px solid black;
           line-height:40px;
           }
           input:focus{
               outline: none;
           }
           .sbox:hover{
               color: aquamarine;
           }
           .s1box
           {
           height:50px;
           width: 140px;
           /* border:1px solid white; */
           margin-left: 1200px;
           margin-top: -51.5px;
           font-size: 20px;
           text-align: center;
           border: 1px solid black;
           line-height:40px;
           }
           input:focus{
               outline: none;
           }
           .s1box:hover{
               color: aquamarine;
           }
           .zbox
           {
           height: 55px;
           width:800px;
           border:1px solid white;
           margin: auto;
           margin-top: 40px;
           display:flex;
           }
           .z1box
           {
           height:50px;
           width:120px;
           border:1px solid white;
           font-size:22px;
           text-align: center;
           }
           input:focus{
               outline: none;
           }
           .z1box:hover{
               color: aquamarine;
               }
           .gbigbox
           {
           height:100px;
           width: 350px;
           border:1px solid white;
           margin: auto;
           margin-top: 50px;
           font-size:40px;
           letter-spacing: 12px;
           text-align: center;
           }
           input:focus{
               outline: none;
           }
           .gbigbox:hover{
               color: aquamarine;
           }
           .wbox
           {
           height:80px;
           width:1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .w1box
           {
           height:80px;
           width:200px;
           border:1px solid white;
           margin: auto;
           font-size:25px;
           text-align:center;
           }
           input:focus{
               outline: none;
           }
           .w1box:hover{
               color: aquamarine;
           }
           .Tbigbox
           {
           height:200px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           margin-top:20px;
           display:flex;
           }
           .t1box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .t2box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .t3box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .t4box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .t5box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .nbox
           {
           height:80px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .n1box
           {
           height:50px;
           width:220px;
           border:1px solid white;
           font-size: 16px;
           }
           .n2box
           {
           height:30px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           display: flex;
           margin-top:-30px;
           }
           .n3box
           {
           height:30px;
           width:220px;
           border:1px solid white;
           font-size: 10px;
           margin-top:0px;
           font-size: 15px;
           }
           .xbox
           {
           height:50px;
           width:260px;
           border:1px solid white;
           margin: auto;
           margin-top: 40px;
           font-size: 40px;
           text-align: center;
           letter-spacing: 12px;
           }
           input:focus{
               outline: none;
           }
           .xbox:hover{
               color: aquamarine;
           }
           .x0box
           {
           height: 40px;
           width:140px;
           border: 1px solid black;
           float:left;
           font-size: 16px;
           text-align: center;
           line-height:30px;

           }
           .x1box
           {
           height:60px;
           width:800px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .x2box
           {
           height:60px;
           width:1200px;
           border:1px solid white;
           font-size: 16px;
           text-align: center;
           line-height:50px;
           margin: auto;
           }
           .x3box
           {
           height:60px;
           width:60px;
           border:1px solid black;
           float: left;
           margin-top: 80px;
           font-size:30px;
           text-align:center;
           line-height:60px;

           }
           .x4box
           {
           height:60px;
           width:60px;
           border:1px solid black;
           float:right;
           margin-top: 80px;
           font-size:30px;
           text-align:center;
           line-height:60px;
           }
           .qbigbox
           {
           height:130px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .q1box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }

           .q2box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .q2box:hover{
               color: aquamarine;
           }
           .q3box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .q4box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .q5box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .q5box:hover{
               color: aquamarine;
           }
           .q6box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }

           .q7box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .q8box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .q8box:hover{
               color: aquamarine;
           }
           .q9box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .abigbox
           {
           height:130px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           margin-top: 20px;
           display: flex;
           }

           .a1box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .a2box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .a2box:hover{
               color: aquamarine;
           }
           .a3box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .a4box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .a5box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .a5box:hover{
               color: aquamarine;
           }
           .a6box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .a7box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .a8box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 120px;
           }
           input:focus{
               outline: none;
           }
           .a8box:hover{
               color: aquamarine;
           }
           .a9box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .obigbox
           {
           height:130px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           margin-top: 20px;
           display: flex;
           }

           .o1box
           {
           height:130px;
           width:160px;
           border:1px solid black;
           }
           .o2box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .o2box:hover{
               color: aquamarine;
           }
           .o3box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .o4box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .o5box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 50px;
           }
           input:focus{
               outline: none;
           }
           .o5box:hover{
               color: aquamarine;
           }
           .o6box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .o7box
           {
           height:130px;
           width:160px;
           border:1px solid white;
           }
           .o8box
           {
           height:130px;
           width:180px;
           border:1px solid white;
           font-size:20px;
           line-height: 120px;
           }
           input:focus{
               outline: none;
           }
           .o8box:hover{
               color: aquamarine;
           }
           .o9box
           {
           height:130px;
           width:60px;
           border:1px solid white;
           line-height:120px;
           }
           .jbox
           {
           height:50px;
           width:260px;
           border:1px solid white;
           margin: auto;
           margin-top: 40px;
           font-size: 40px;
           text-align: center;
           letter-spacing: 12px;
           }
           input:focus{
               outline: none;
           }
           .jbox:hover{
               color: aquamarine;
           }
           .j1box
           {
           height:60px;
           width:60px;
           border:1px solid black;
           float: left;
           margin-top: 80px;
           font-size:30px;
           text-align:center;
           line-height:60px;

           }
           .j2box
           {
           height:60px;
           width:60px;
           border:1px solid black;
           float:right;
           margin-top: 80px;
           font-size:30px;
           text-align:center;
           line-height:60px;
           }
           .jbigbox
           {
           height:200px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           display: flex;
           margin-top: 30px;
           }
           .j3box
           {
           height: 200px;
           width:600px;
           border: 1px solid white;
           }
           .j4box
           {
           height: 200px;
           width:600px;
           border: 1px solid white;

           }
           .dbox
           {
           height:50px;
           width:260px;
           border:1px solid white;
           margin: auto;
           margin-top: 40px;
           font-size: 40px;
           text-align: center;
           letter-spacing: 12px;
           }
           input:focus{
               outline: none;
           }
           .dbox:hover{
               color: aquamarine;}
       .d1box
       {
       height:60px;
       width:800px;
       border:1px solid white;
       margin: auto;
       display: flex;
       }
       .d2box
       {
       height:60px;
       width:1200px;
       border:1px solid white;
       font-size: 16px;
       text-align: center;
       line-height:50px;
       margin: auto;
       }
       .m0.1box
       {
       height:60px;
       width:60px;
       border:1px solid black;
       float: left;
       margin-top: 80px;
       font-size:30px;
       text-align:center;
       line-height:60px;

       }
       .m0box
       {
       height:60px;
       width:60px;
       border:1px solid black;
       float:right;
       margin-top: 80px;
       font-size:30px;
       text-align:center;
       line-height:60px;
       }
       .mbigbox
       {
       height:200px;
       width:1200px;
       border:1px solid white;
       margin: auto;
       margin-top:20px;
       display:flex;
       }
       .m1box
       {
       height:200px;
       width:220px;
       border:1px solid white;
       float: left;
       margin-top:0%;
       margin-left:0%;
       }
       .m2box
       {
       height:200px;
       width:220px;
       border:1px solid white;
       float: left;
       margin-top:0%;
       margin-left:0%;
       }
       .m3box
       {
       height:200px;
       width:220px;
       border:1px solid white;
       float: left;
       margin-top:0%;
       margin-left:0%;
       }
       .m4box
       {
       height:200px;
       width:220px;
       border:1px solid white;
       float: left;
       margin-top:0%;
       margin-left:0%;
       }
       .m5box
       {
       height:200px;
       width:220px;
       border:1px solid white;
       float: left;
       margin-top:0%;
       margin-left:0%;
       }
       .m6box
       {
       height: 80px;
       width: 1200px;
       border:1px solid white;
       margin: auto;
       display: flex;
       }
       .m7box
       {
       height: 80px;
       width: 220px;
       border:1px solid white;
       font-size: 16px;
       line-height:30px;
       }
       .m8box
       {
       height:80px;
       width: 220px;
       border:1px solid white;
       font-size:16px;
       line-height:30px;
       }
       .m9box
       {
       height:80px;
       width: 220px;
       border:1px solid white;
       font-size: 16px;
       line-height:30px;
       }
       .m10box
       {
       height:80px;
       width: 220px;
       border:1px solid white;
       font-size: 16px;
       text-align: center;
       line-height:40px;
       }
       .m11box
       {
       height:80px;
       width: 220px;
       border:1px solid white;
       font-size:16px;
       text-align: center;
       line-height:40px;
       }

           .cbigbox
           {
           height:200px;
           width:1200px;
           border:1px solid white;
           margin: auto;
           margin-top:20px;
           display:flex;
           }
           .c1box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .c2box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .c3box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .c4box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .c5box
           {
           height:200px;
           width:220px;
           border:1px solid white;
           float: left;
           margin-top:0%;
           margin-left:0%;
           }
           .c6box
           {
           height: 80px;
           width: 1200px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .c7box
           {
           height: 80px;
           width: 220px;
           border:1px solid white;
           font-size: 16px;
           line-height:30px;
           }
           .c8box
           {
           height:80px;
           width: 220px;
           border:1px solid white;
           font-size:16px;
           line-height:30px;
           }
           .c9box
           {
           height:80px;
           width: 220px;
           border:1px solid white;
           font-size: 16px;
           text-align: center;
           line-height:30px;
           }
           .c10box
           {
           height:80px;
           width: 220px;
           border:1px solid white;
           font-size: 16px;
           text-align: center;
           line-height:40px;
           }
           .c11box
           {
           height:80px;
           width: 220px;
           border:1px solid white;
           font-size:16px;
           text-align: center;
           line-height:40px;
           }
           .pbox
           {
           height:50px;
           width:260px;
           border:1px solid 0;
           margin: auto;
           margin-top: 40px;
           font-size: 40px;
           text-align: center;
           letter-spacing: 12px;
           }
           input:focus{
               outline: none;
           }
           .pbox:hover{
               color: aquamarine;}

           .p1box
           {
           height: 500px;
           width: 1000px;
           border: 1px solid 0;
           margin: auto;
           display: flex;
           margin-top: 30px;
           }
           .p2box
           {
           height: 500px;
           width: 200px;
           border: 1px solid 0;
           background-color: lightpink;
           }
           .p3box
           {
           height: 500px;
           width: 200px;
           border: 1px solid 0;
           background-color: skyblue;
           }
           .p4box
           {
           height: 500px;
           width: 200px;
           border: 1px solid 0;
           background-color:lightblue;
           }
           .p5box
           {
           height: 500px;
           width: 200px;
           border: 1px solid 0;
           background-color: mistyrose;
           }
           .p6box
           {
           height: 500px;
           width: 200px;
           border: 1px solid 0;
           background-color: blanchedalmond;
           }
           .f1box
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:20px;
           text-align: center;
           font-size: 20px;
           }
           .f2box
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:10px;
           text-align: center;
           font-size: 30px;
           }
           .f3box
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:80px;
           }
           .f4box
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .f5box
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .xhz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:20px;
           text-align: center;
           font-size: 20px;
           }
           .x1hz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:10px;
           text-align: center;
           font-size: 30px;
           }
           .x2hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:80px;
           }
           .x3hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .x4hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .lhz1
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:20px;
           text-align: center;
           font-size: 20px;
           }
           .lhz2
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:10px;
           text-align: center;
           font-size: 25px;
           }
           .lhz3
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:80px;
           }
           .lhz4
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .lhz5
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .o1hz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:20px;
           text-align: center;
           font-size: 20px;
           }
           .o2hz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:10px;
           text-align: center;
           font-size: 30px;
           }
           .o3hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:80px;
           }
           .o4hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .o5hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .h1hz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:20px;
           text-align: center;
           font-size: 20px;
           }
           .h2hz
           {
           height: 40px;
           width: 100px;
           border:1px solid 0;
           margin: auto;
           margin-top:10px;
           text-align: center;
           font-size: 30px;
           }
           .h3hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:80px;
           }
           .h4hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .h5hz
           {
           height: 60px;
           width: 200px;
           border:1px solid 0;
           margin: auto;
           margin-top:60px;
           }
           .mv
           {
           height:50px;
           width:260px;
           border:1px solid white;
           margin: auto;
           margin-top: 40px;
           font-size: 40px;
           text-align: center;
           letter-spacing: 12px;
           }
           input:focus{
               outline: none;
           }
           .mvbox:hover{
               color: aquamarine;}
           .mv1
           {
           height:60px;
           width:600px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .mv2
           {
           height:60px;
           width:1200px;
           border:1px solid white;
           font-size: 16px;
           text-align: center;
           line-height:100px;
           margin: auto;
           }
           .cbighz
           {
           height:130px ;
           width: 1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .c1hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           }
           .c2hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .c3hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           }
           .c4hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .c5hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .c6hz
           {
           height:100px ;
           width: 1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           margin-top: 10px;
           }
           .c7hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c8hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c9hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c10hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c11hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c12hz
           {
           height:100px ;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c13hz
           {
           height:100px ;
           width: 1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           margin-top: -60px;
           }
           .c14hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c15hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c16hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c17hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .c18hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .wbighz
           {
           height:130px ;
           width: 1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           }
           .w1hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           }
           .w2hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .w3hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           }
           .w4hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .w5hz
           {
           height:130px;
           width:200px;
           border:1px solid white;
           }
           .w6hz
           {
           height:100px ;
           width: 1000px;
           border:1px solid white;
           margin: auto;
           display: flex;
           margin-top: 10px;
           }
           .w7hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w8hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w9hz
           {
           height:130px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w10hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w11hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w12hz
           {
           height:100px ;
           width: 1000px;
           border:1px solid white;
           display: flex;
           margin: auto;
           line-height:1px;

           }
           .w13hz
           {
           height:100px ;
           width: 200px;
           border:1px solid white;
           font-size:20px;
           text-align: center;


           }
           .w14hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w15hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w16hz
           {
           height:100px;
           width: 200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .w17hz
           {
           height:100px;
           width:200px;
           border:1px solid white;
           text-align: center;
           font-size: 20px;
           }
           .jhz
           {
           height: 500px;
           width: 100%;
           border:1px solid white;
           margin: auto;
           }


       </style>
   </head>
   <body>
   <div class="Bigbox">
       <div class="Lbox">
           <img src="img/screenshot-1716887672784.png"/ width="200" height="80px">
           <div class="lbox">音乐馆</div>
           <div class="lbox">我的音乐</div>
           <div class="lbox">客户端</div>
           <div class="lbox">开放平台</div>
           <div class="lbox">VlP</div>
       </div>
       <div class="rbox">搜索音乐、mv、歌单、用户Q</div>
       <div class="R1box">登录</div>
       <div class="sbox">开通VIP</div>
       <div class="s1box">充值</div>
       <div class="zbox">
       <div class="z1box">首页</div>
       <div class="z1box">歌手</div>
       <div class="z1box">新碟</div>
       <div class="z1box">排行榜</div>
       <div class="z1box">分类歌单</div>
       <div class="z1box">电台</div>
       <div class="z1box">mv</div>
       <div class="z1box">数字专辑</div>
       </div>
       <div class="gbigbox">歌单推荐</div>
       <div class="wbox">
           <div class="w1box">为你推荐</div>
           <div class="w1box">情歌</div>
           <div class="w1box">官方歌单</div>
           <div class="w1box">伤感</div>
           <div class="w1box">网络歌曲</div>
           <div class="w1box">经典</div>
       </div>
       <div class="Tbigbox">
           <div class="t1box">
           <img src="img/5.jpg" width="200px" height="200px"/>
           </div>
           <div class="t2box"><img src="img/7jpg.jpeg" width="200px" height="200px"/></div>
           <div class="t3box"><img src="img/303jpg.jpg" width="200px" height="200px"/></div>
           <div class="t4box"><img src="img/1jpg.jpg" width="200px" height="200px"></div>
           <div class="t5box"><img src="img/9jpg.jpg" width="200px" height="200px"/></div>
       </div>
       <div class="nbox">
           <div class="n1box">天气每天都在变，更何况爱情呢？</div>
           <div class="n1box">听多久emo多久，哭了也就过去了 </div>
           <div class="n1box">BFRND音乐特辑播放量：2650</div>
           <div class="n1box">听歌都会哭的人，又怎么会幸福呢 </div>
           <div class="n1box">听悲伤的情歌，看离别的戏</div>
   </div>
   <div class="n2box">
       <div class="n3box">播放量：288.3万</div>
       <div class="n3box">播放量：268.8万</div>
       <div class="n3box">播放量：246.9万</div>
       <div class="n3box">播放量：290.6万</div>
       <div class="n3box">播放量：2556万</div>
       </div>
       <div class="xbox">新歌首发</div>
       <div class="x0box">播放全部</div>
       <div class="x1box">
           <div class="x2box">最新</div>
           <div class="x2box">内地</div>
           <div class="x2box">港台</div>
           <div class="x2box">欧美</div>
           <div class="x2box">韩国</div>
           <div class="x2box">日本</div>
       </div>
       <div class="x3box"><</div>
       <div class="x4box">></div>
       <div class="qbigbox">
           <div class="q1box"><img src="img/1jpg.webp" height="130px" width="160px"></div>
           <div class="q2box">第十幕(Episode X)迪丽热巴</div>
           <div class="q3box">02:36</div>
           <div class="q4box"><img src="img/2jpg.webp" height="130px" width="160px"/></div>
           <div class="q5box">观雪<< 墨雨云间》影... 王心凌</div>
           <div class="q6box">04:33</div>
           <div class="q7box"><img src="img/3jpg.webp" height="130" width="160px"/></div>
           <div class="q8box">凡人之躯<<末代厨娘...张远</div>
           <div class="q9box">04：01</div>
       </div>
       <div class="abigbox">
       <div class="a1box"><img src="img/q3.jpg"/ height="130" width="160px"></div>
       <div class="a2box">青春要用几行诗来写 Eric 周兴哲</div>
       <div class="a3box">04:55</div>
       <div class="a4box"><img src="img/q2.webp"/ height="130px" width="160px"></div>
       <div class="a5box">写在星星上<<玫瑰的...吴克群</div>
       <div class="a6box">03：52</div>
       <div class="a7box"><img src="img/q4.jpg" height="130px" width="160px"></div>
       <div class="a8box">唤醒蔚蓝陈卓璇</div>
       <div class="a9box">02：34</div>
       </div>
       <div class="obigbox">
           <div class="o1box"><img src="img/q5.webp"/ width="160px" height="130px"></div>
           <div class="o2box">卷鸟<<看不见影子的...胡夏</div>
           <div class="o3box">03：02</div>
           <div class="o4box"><img src="img/q6jpj.webp"/ height="130px" width="160px"></div>
           <div class="o5box">饭店五星级马思唯</div>
           <div class="o6box">02：44</div>
           <div class="o7box"><img src="img/o1.webp"/ height="130px" width="160px"></div>
           <div class="o8box">周深三餐四季</div>
           <div class="o9box">03：55</div>
       </div>
       <div class="jbox">精彩推荐</div>
       <div class="j1box"><</div>
       <div class="j2box">></div>
       <div class="jbigbox">
           <div class="j3box"><img src="img/08.jpg"/ height="200px" width="580px"></div>
           <div class="j4box"><img src="09.jpg"/ height="200px" width="600px"></div>
       </div>
       <div class="dbox">新碟首发</div>
       <div class="d1box">
           <div class="d2box">内地</div>
           <div class="d2box">港台</div>
           <div class="d2box">欧美</div>
           <div class="d2box">韩国</div>
           <div class="d2box">日本</div>
       </div>
       <div class="mbigbox">
           <div class="m1box"><img src="img/a1.webp"/ height="200px" width="210"></div>
           <div class="m2box"><img src="img/a2.webp" height="200px" width="210px"></div>
           <div class="m3box"><img src="img/a3.webp" height="200px" width="210px"></div>
           <div class="m4box"><img src="img/a4.webp"/ height="200px" width="210px"></div>
           <div class="m5box"><img src="img/a5.webp" height="200px" width="210px"></div>
       </div><div class="m6box">
       <div class="m7box">Chase the Light </div>
       <div class="m8box">一世聪明崔子格</div>
       <div class="m9box">音乐剧<<嗜血博士》原生专辑</div>
       <div class="m10box">不曾谋面王忻辰/苏星捷</div>
       <div class="m11box">纪念郭柯宇</div>
       </div>
           <div class="cbigbox">
               <div class="c1box"> <img src="img/b1.jpg" height="200px" width="210px"></div>
               <div class="c1box"> <img src="img/b2.webp" height="200px" width="210px"></div>
               <div class="c1box"> <img src="img/b3.webp" height="200px" width="210px"></div>
               <div class="c1box"> <img src="img/b4.webp" height="200px" width="210px"/></div>
               <div class="c5box"> <img src="img/b5.webp"/ height="200px" width="210px"></div>
           </div>
           <div class="c6box">
               <div class="c7box">别念故乡花儿香(流行版)</div>
               <div class="c8box">柳叶摘星辰影视原声带</div>
               <div class="c9box">回忆如同千军万马</div>
               <div class="c10box">人生就算是五指山</div>
               <div class="c11box">多想回去的从前 Big Cole</div>
           </div>
           <div class="pbox">排行榜</div>
           <div>
       <div class="p1box">
       <div class="p2box">
           <div class="f1box">巅峰榜</div>
           <div class="f2box">热歌</div>
           <div class="f3box">1 若月亮没来(若....王宇宙Leto/乔...)</div>
           <div class="f4box">2 人间半途刘阳阳</div>
           <div class="f5box">3 如果可以韦礼安</div>
       </div>
       <div class="p3box">
           <div class="xhz">巅峰榜</div>
           <div class="x1hz">新歌</div>
           <div class="x2hz">1 暮色回响吉星出租</div>
           <div class="x3hz">2 人间半途刘阳阳</div>
           <div class="x4hz">3 重生之我在异乡....王睿卓</div>

       </div>
       <div class="p4box">
           <div class="lhz1">巅峰榜</div>
           <div class="lhz2">流行指数</div>
           <div class="lhz3">1 人间半途刘阳阳</div>
           <div class="lhz4">2 暮色回响吉星出租</div>
           <div class="lhz5">3 冬眠2023 阿yueyue/刘</div>
       </div>
       <div class="p5box">
       <div class="o1hz">巅峰榜</div>
           <div class="o2hz">欧美</div>
           <div class="o3hz">1 Hero(Explicit)Charlie Puth</div>
           <div class="o4hz">2 BlRDS OF A FEA....Bilie Eilish</div>
           <div class="o5hz">3 Houdini(Explic....Eminem</div>
       </div>
       <div class="p6box">
           <div class="h1hz">巅峰榜</div>
           <div class="h2hz">韩国</div>
           <div class="h3hz">1 How Sweet Newjeans</div>
           <div class="h4hz">2 (spring s.... 10CM)</div>
           <div class="h5hz">3 Bubble Gum Newjeans</div>
       </div>
       </div>
       <div class="mv">MV</div>
       <div class="mv1">
               <div class="mv2">精选</div>
               <div class="mv2">内地</div>
               <div class="mv2">港台</div>
               <div class="mv2">欧美</div>
               <div class="mv2">韩国</div>
               <div class="mv2">日本</div>
           </div>
       </div>
       <div class="mv2"></div>
       <div class="cbighz">
           <div class="c1hz"><img src="img/r1.webp" width="190px" height="130px"></div>
           <div class="c2hz"><img src="img/r2.webp" width="190px" height="130px"></div>
           <div class="c3hz"><img src="img/r3.webp" width="190px" height="130px"></div>
           <div class="c4hz"><img src="img/r5.webp" width="190px" height="130px"></div>
           <div class="c5hz"><img src="img/r6.webp" width="190px" height="130px"></div>
           </div>
           <div class="c6hz">
               <div class="c7hz">成名在望五月天</div>
               <div class="c8hz">猴子lampo</div>
               <div class="c9hz">饭店五星级马思唯</div>
               <div class="c11hz">去明天周深</div>
               <div class="c12hz">野兽领主滕格尔</div>
           </div>
           <div class="c13hz">
               <div class="c14hz">1.9万</div>
               <div class="c15hz">4238</div>
               <div class="c16hz">1.0万</div>
               <div class="c17hz">7.6万</div>
               <div class="c18hz">6859</div>
           </div>
           <div class="wbighz">
               <div class="w1hz"><img src="img/b1.webp" width="190px" height="130px"></div>
               <div class="w2hz"><img src="img/a3.webp" width="190px" height="130px"></div>
               <div class="w3hz"> <img src="img/b3.webp"/ width="190px" height="130px"></div>
               <div class="w4hz"><img src="img/b4.webp"/ width="190px" height="130px"></div>
               <div class="w5hz"><img src="img/b5.webp" width="190px" height="130px"></div>
           </div>
           <div class="w6hz">
               <div class="w7hz">梦想之路黄霄云</div>
               <div class="w8hz">第十幕迪丽热巴</div>
               <div class="w9hz">威神</div>
               <div class="w10hz">我好像有点喜欢你好妹妹</div>
               <div class="w11hz"> 借过一下周深</div>
           </div>
           <div class="w12hz">
               <div class="w13hz">1.8万</div>
               <div class="w14hz">18.7万</div>
               <div class="w15hz">3.7万</div>
               <div class="w16hz">1.2万</div>
               <div class="w17hz">11.0万</div>
           </div>
           <div class="jhz"><img src="img/screenshot-1718010424558.png" height="500px" width="100%"></div>
           </div>
   </body>
</html>