【前端】QQ音乐

最新推荐文章于 2025-04-25 19:16:38 发布

是个帅哥哎

最新推荐文章于 2025-04-25 19:16:38 发布

阅读量1.7k

点赞数 33

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/Stunning501/article/details/139815357

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           body {
               width: 2140px;
               border: 1px solid #bdbdbd;
           }

           * {
               margin: 0;
               padding: 0;
               border: #e3e3e3;
           }

           a {
               text-decoration: none;
               color: black;
               font-size: 30px;
               float: left;
               /* margin-top: 20px; */
               text-align: center;
           }

           h2 {
               margin-top: 10px;
           }

           input:focus {
               outline: none;
               float: left;
           }

           .myl:hover {
               color: #55aa00;
           }

           img {
               float: left;
           }

           .box5 {
               width: 1920px;
               height: 90px;
               margin-left: 100px;
           }

           .xbox5 {
               width: 180px;
               height: 90px;
               font-size: 32px;
               text-align: center;
               float: left;
               display: inlne-block;
               background-color: #ffffff;
           }

           .xbox5-1 {
               width: 180px;
               height: 50px;
               border: 2px solid #a2a2a2;
               float: left;
               margin-left: -50px;
               margin-top: 14px;
           }

           .xbox5-1 img {
               width: 25px;
               float: left;
               margin-left: 230px;
               margin-top: -30px;
           }

           .xbox5 a {
               margin-top: 20px;
           }

           .xbox5-2 {
               width: 150px;
               height: 50px;
               border: 2px solid #a2a2a2;
               float: left;
               margin-top: 14px;
               background-color: #00aa00;
           }

           .xbox5-2 select {
               margin-left: 10px;
               margin-top: 12px;
               background-color: #00aa00;
           }

           .xbox5-3 {
               width: 110px;
               height: 50px;
               border: 2px solid #a2a2a2;
               float: left;
               margin-top: 14px;
           }

           .xbox5-3 select {
               margin-left: 8px;
               margin-top: 12px;
           }

           .box6 {
               width: 1000px;
               height: 50px;
               margin-left: 500px;
           }

           .xbox6 {
               width: 125px;
               height: 50px;
               font-size: 32px;
               text-align: center;
               float: left;
               display: inlne-block;
               background-color: #ffffff;
           }

           .kbox {
               width: 2140px;
               height: 50px;
               background-color: #f5f5f5;
           }

           .bigbox {
               width: 2140px;
               height: 700px;
               background-color: #f5f5f5;
           }

           .box1 {
               background-color: #f5f5f5;
           }

           .box1 h1 {
               margin-left: 45%;
           }

           .box2 {
               width: 840px;
               */ height: 40px;
               margin-left: 650px;
               background-color: #f5f5f5;
           }

           .xbox2 {
               width: 140px;
               height: 80px;
               font-size: 10px;
               text-align: center;
               float: left;
               display: inlne-block;
               background-color: #f5f5f5;
               /* margin-left: 20%; */
           }

           .box {
               width: 300px;
               height: 350px;
               font-size: 32px;
               text-align: center;
               float: left;
               display: inlne-block;
           }

           .xbox:hover {
               width: 80px;
               height: 80px;
               border-radius: 50%;
               background-color: #f5f5f5;
           }

           .xbox1 {
               position: absolute;
               height: 140px;
               width: 140px;
               top: 495px;
           }

           .xbox1:hover {
               width: 0;
               height: 0;
               border-top: 70px solid transparent;
               border-bottom: 70px solid transparent;
               border-left: 70px solid transparent;
               border-right: 70px solid #454545;
           }

           .xbox1-1 {
               position: absolute;
               height: 140px;
               width: 140px;
               top: 495px;
               float: right;
           }

           .xbox1-1:hover {
               width: 0;
               height: 0;
               border-top: 70px solid transparent;
               border-bottom: 70px solid transparent;
               border-left: 70px solid #454545;
               border-right: 70px solid transparent;
           }

           img:focus {
               outline: none;
           }

           p {
               margin-top: 10px;
               font-size: 18px;
               float: left;
           }

           .clear {
               clear: both;
           }

           .box4 {
               width: 200px;
               height: 20px;
               margin-left: 42%;
               margin-top: 100px;
           }

           .xbox4 {
               width: 10px;
               height: 10px;
               border-radius: 50%;
               background-color: #040805;
               margin: auto;
               float: left;
               margin-left: 30px;
           }

           .xxbox {
               position: absolute;
               width: 120px;
               height: 120px;
               margin: auto;
               border-radius: 150px;
               top: 580px;
               left: 260px;
           }

           .tbox {
               width: 2140px;
               height: 1100px;
               background-color: #fff9ff
           }

           .tbox1 {
               height: 100px;
           }

           .tbox1-1 {
               position: absolute;
               width: 150px;
               height: 45px;
               margin-left: 170px;
               border: 1px solid #bdbdbd;
               margin-top: 150px;
           }

           .tbox1-1 a {
               position: absolute;
               margin-left: 45px;
               margin-top: -30px
           }

           .tbox1-1-1 {
               width: 0;
               height: 0;
               border-top: 10px solid transparent;
               border-bottom: 10px solid transparent;
               border-left: 10px solid #454545;
               border-right: 10px solid transparent;
               margin: 10px 30px;
           }

           .tbox1-2 {
               position: absolute;
               width: 1500px;
               height: 45px;
               margin-left: 500px;
               margin-top: 150px;
           }

           .tbox1-2 a {
               margin-left: 100px;
           }

           .tbox2 {
               width: 1900px;
               height: 850px;
               margin-left: 110px;
               margin-top: 150px;
               float: left;
           }

           .tbox2-1 {
               width: 500px;
               height: 120px;
               boder-bottom: 1px solid #bdbdbd;
               float: left;
               margin-left: 60px;
           }

           .tbox2 img {
               width: 100px;
           }

           .tbox2 a {
               margin-top: 20px;
           }

           .myl1 {
               position: relative;
               top: 10px;
               color: #bdbdbd
           }

           .myl1:hover {
               color: #55aa00;
           }

           .tbox2-1 p {
               margin-top: 20px;
               float: right;
           }

           .tbox3 {
               width: 480px;
               height: 20px;
               margin-left: 32%;
               margin-top: 45px;
           }

           .tbox3-1 {
               width: 10px;
               height: 10px;
               border-radius: 50%;
               background-color: #040805;
               margin: auto;
               float: left;
               margin-left: 30px;
           }

           .sbox {
               width: 2140px;
               height: 480px;
               background-color: #f5f5f5
           }

           .sbox1 {
               width: 1900px;
               height: 295px;
               margin-left: 150px;
               margin-top: 20px;
               float: left;
           }

           .sbox1-1 {
               width: 840px;
               height: 240px;
               float: left;
               margin-left: 10px;
           }

           .sbox1-1 img {
               width: 820px;
               height: 250px;
           }

           .sbox2 {
               width: 200px;
               height: 20px;
               margin-left: 41%;
           }

           .sbox2-1 {
               width: 10px;
               height: 10px;
               border-radius: 50%;
               background-color: #040805;
               margin: auto;
               float: left;
               margin-left: 30px;
           }

           .fbox {
               width: 2140px;
               height: 1070px;
               background-color: #e6e6e6
           }

           .fbox1 {
               position: absolute;
               width: 1500px;
               height: 45px;
               margin-left: 615px;
               margin-top: 150px;
           }

           .fbox1 a {
               margin-left: 100px;
           }

           .fbox2 {
               width: 1900px;
               height: 790px;
               margin-left: 150px;
               margin-top: 150px;
               float: left;
           }

           .fbox2 img {
               width: 300px;
           }

           .fbox2-1 {
               width: 320px;
               height: 400px;
               boder-bottom: 1px solid #bdbdbd;
               float: left;
               margin-left: 20px;
           }

           .myl2 {
               position: relative;
               top: 35px;
               color: #bdbdbd
           }

           .fbox3 {
               width: 80px;
               height: 20px;
               margin-left: 45%;
           }

           .fbox3-1 {
               width: 10px;
               height: 10px;
               border-radius: 50%;
               background-color: #040805;
               margin: auto;
               float: left;
               margin-left: 30px;
           }

           .wbox {
               width: 2140px;
               height: 890px;
               background-color: #f3f3f3;
           }

           .wbox p {
               width: 2140px;
               height: 80px;
               margin-left: 35%;
           }

           .wbox1 {
               width: 1900px;
               height: 700px;
               float: left;
               margin-left: 130px;
           }

           .wbox1-1 {
               width: 300px;
               height: 600px;
               float: left;
               margin-left: 40px;
               margin-top: 20px;
               background-color: #af2533;
           }

           .wp {
               margin-left: 100px;
               margin-top: 40px;
               font-size: 28px;
               color: #ffffff;
           }

           .wa {
               margin-left: 110px;
               margin-top: -40px;
               font-size: 30px;
               color: #ffffff;
           }

           .wbox1-1-1 {
               width: 50px;
               height: 3px;
               background-color: #ffffff;
               margin-left: 110px;
               margin-top: 160px;
           }

           .wbox2 {
               width: 200px;
               height: 350 px;
               margin-top: 35px;
               margin-left: 40px;
           }

           li {
               width: 200px;
               /* margin-top: 30px; */
               display: block;
           }

           .wla1 {
               font-size: 18px;
               color: #ffffff;
               /* margin-top:20px */
           }

           .wbox2-1 {
               width: 20px;
               height: 90px;
               float: left;
               margin-top: 10px;
           }

           .wbox2-2 {
               width: 180px;
               height: 90px;
               margin-top: -90px;
               margin-left: 25px;
               float: left;
           }

           .wla2 {
               font-size: 18px;
               color: #ffffff;
               /* margin-left: 20px; */
           }

           .wla3 {
               font-size: 18px;
               color: #ffffff;
               /* margin-left: 20px; */
               margin-top: 10px;
           }

           .lbox {
               width: 2140px;
               height: 960px;
               background-color: #e6e6e6
           }

           .lbox1 {
               position: absolute;
               width: 1500px;
               height: 45px;
               margin-left: 615px;
               margin-top: 150px;
           }

           .lbox1 a {
               margin-left: 100px;
           }

           .lbox2 {
               width: 1900px;
               height: 680px;
               margin-left: 150px;
               margin-top: 150px;
               float: left;
           }

           .lbox2 img {
               width: 300px;
           }

           .lbox2-1 {
               width: 320px;
               height: 320px;
               boder-bottom: 1px solid #bdbdbd;
               float: left;
               margin-left: 20px;
           }

           .lbox2-1 .myl2 {
               position: relative;
               top: 45px;
               color: #bdbdbd
           }

           .lbox3 {
               width: 200px;
               height: 20px;
               margin-left: 41%;
           }

           .lbox3-1 {
               width: 10px;
               height: 10px;
               border-radius: 50%;
               background-color: #040805;
               margin: auto;
               float: left;
               margin-left: 30px;
           }

           .qbox {
               width: 2140px;
               height: 960px;
               background-color: #333333
           }

           .qbox a {
               text-decoration: none;
               color: #bdbdbd;
               font-size: 20px;
               float: left;
               margin-top: 5px;
               text-align: center;
           }

           .qa1:hover {
               color: green;
           }

           .qbox img {
               width: 600px;
               margin-top: 50px;
           }

           .qbox1 {
               width: 600px;
               height: 800px;
               float: left;
               margin-left: 150px;
               margin-top: 50px;
           }

           .qbox2 {
               width: 650px;
               height: 800px;
               float: left;
               margin-left: 50px;
               margin-top: 50px;
           }

           .qbox3 {
               width: 400px;
               height: 800px;
               float: left;
               margin-left: 50px;
               margin-top: 50px;
           }

           .qbox4 {
               height: 150px;
               float: bottom;
               margin-left: 150px;
               margin-bottom: 50px;
           }

           img:hover {
               transform: scale(1.02);
           }
       </style>
   </head>
   <body>
       <div class="dabox">
           <div class="box5" style="margin-top:50px;">
               <div class="xbox5" style="width:300px;">
                   <img src="img/qq音乐1.jpg" class="qq音乐1" />
                   <h2>QQ音乐</h2>
               </div>
               <div class="xbox5">
                   <a href="#" class="myl">音乐馆</a>
               </div>
               <div class="xbox5">
                   <a href="#" class="myl">我的音乐</a>
               </div>
               <div class="xbox5">
                   <a href="#" class="myl">客户端</a>
               </div>
               <div class="xbox5">
                   <a href="#" class="myl">开放平台</a>
               </div>
               <div class="xbox5" style="width: 140px;">
                   <a href="#" class="myl">VIP</a>
               </div>
               <div class="xbox5-1" style="width: 260px;">
                   <input style="width: 220px;height: 40px;font-size: 18px;" type="text" placeholder="搜索音乐..." value />
                   <img src="img/搜索图标.jpg" class="搜索图标" />
               </div>
               <div class="xbox5" style="width: 140px;margin-left:50px;">
                   <a href="#" class="myl">登录</a>
               </div>
               <div class="xbox5-2" style="margin-left:-20px;">
                   <select style="font-size: 18px;">
                       <option>开通会员</option>
                       <option>开通超级VIP</option>
                       <option>续费豪华绿钻</option>
                   </select>
               </div>
               <div class="xbox5-3" style="margin-left:40px;">
                   <select style="font-size: 18px;">
                       <option>充值</option>
                       <option>购买乐币</option>
                       <option>充值饭票</option>
                   </select>
               </div>
               <div class="clear"></div>
           </div>
           <hr />
           <div class="box6">
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">首页</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">歌手</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">新碟</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">排行榜</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">分类歌单</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">电台</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">MV</a>
               </div>
               <div class="xbox6">
                   <a href="#" class="myl" style="font-size:25px;">数字专辑</a>
               </div>
           </div>
           <div class="kbox"></div>
           <div class="bigbox">
               <div class="box1">
                   <h1>歌单推荐</h1>
               </div>
               <div class="box2" style="margin-top:30px;">
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">为你推荐</a>
                   </div>
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">网络歌曲</a>
                   </div>
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">经典粤语</a>
                   </div>
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">KTV热歌</a>
                   </div>
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">官方歌单</a>
                   </div>
                   <div class="xbox2">
                       <a href="#" class="myl" style="font-size:20px;">情歌</a>
                   </div>
                   <div class="clear"></div>
               </div>
               <div class="bigbox1">
                   <div class="xbox1"></div>
                   <div class="box" style="margin-left: 180px;">
                       <img src="img/qq-1.jpg" class="qq-1" />
                       <a href="#" class="myl" style="font-size:18px;">抖音热播！站内收藏100W+华语歌</a>
                       <p>播放量：3.4亿</p>
                   </div>
                   <div class="box" style="height:350px;width:40px;"></div>
                   <div class="box">
                       <img src="img/qq-2.jpg" class="qq-2" />
                       <a href="#" class="myl" style="font-size:18px;">【律动】炸开屋顶*无线狂欢</a>
                       <p>播放量：230.1万</p>
                   </div>
                   <div class="box" style="height:350px;width:40px;"></div>
                   <div class="box">
                       <img src="img/qq-3.jpg" class="qq-3" />
                       <a href="#" class="myl" style="font-size:18px;">车载R&B|在暮色中狂奔直到月落</a>
                       <p>播放量：56326.6万</p>
                   </div>
                   <div class="box" style="height:350px;width:40px;"></div>
                   <div class="box">
                       <img src="img/qq-4.jpg" class="qq-4" />
                       <a href="#" class="myl" style="font-size:18px;">BFRND音乐专辑畅享来袭</a>
                       <p>播放量：1.1万</p>
                   </div>
                   <div class="box" style="height:350px;width:40px;"></div>
                   <div class="box">
                       <img src="img/qq-5.jpg" class="qq-5" />
                       <a href="#" class="myl" style="font-size:18px;">INS氛围浴室，下班洗澡松弛感</a>
                       <p>播放量：56.4万</p>
                   </div>
                   <div class="xbox1-1" style="margin-left:1900px;"></div>
                   <div class="clear"></div>
                   <div class="xxbox">
                   </div>
               </div>
               <div class="box4">
                   <div class="xbox4"></div>
                   <div class="xbox4"></div>
                   <div class="xbox4"></div>
                   <div class="xbox4"></div>
                   <div class="xbox4"></div>
                   <div class="clear"></div>
               </div>
           </div>
       </div>
       <div class="tbox">
           <p style="margin-left:44%;margin-top:30px;font-size:40px;">新歌首发</p>
           <div class="tbox1">
               <div class="tbox1-1">
                   <div class="tbox1-1-1"></div>
                   <a href="#" class="myl" style="font-size:18px;">播放全部</a>
               </div>
               <div class="tbox1-2">
                   <a href="#" class="myl" style="font-size:20px;">最新</a>
                   <a href="#" class="myl" style="font-size:20px;">内地</a>
                   <a href="#" class="myl" style="font-size:20px;">港台</a>
                   <a href="#" class="myl" style="font-size:20px;">欧美</a>
                   <a href="#" class="myl" style="font-size:20px;">韩国</a>
                   <a href="#" class="myl" style="font-size:20px;">日本</a>
               </div>
           </div>
           <div class="tbox2">
               <div class="tbox2-1">
                   <img src="img/t1.jpg" class="t1" />
                   <a href="#" class="myl" style="font-size:18px;">你是我的英雄《你是我的英雄》</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-250px;">阿云嘎</a>
                   <p style="color:#bdbdbd">5:10</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t2.jpg" class="t2" />
                   <a href="#" class="myl" style="font-size:18px;">Better At LOVE</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-125px;">Walk Off the Earth /Gianni...</a>
                   <p style="color:#bdbdbd">2:13</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t3.jpg" class="t3" />
                   <a href="#" class="myl" style="font-size:18px;">Walls</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-45px;">刘雨欣</a>
                   <p style="color:#bdbdbd">2:35</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t4.jpg" class="t4" />
                   <a href="#" class="myl" style="font-size:18px;">黎明前最暗时候</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-125px;">苏打绿</a>
                   <p style="color:#bdbdbd">4:36</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t5.jpg" class="t5" />
                   <a href="#" class="myl" style="font-size:18px;">You feel me or what</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-170px;">黄旭 /GALI /ShiGGa Shay...</a>
                   <p style="color:#bdbdbd">3:19</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t6.jpg" class="t6" />
                   <a href="#" class="myl" style="font-size:18px;">遇见和告别</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-90px;">伯远</a>
                   <p style="color:#bdbdbd">3:39</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t7.jpg" class="t7" />
                   <a href="#" class="myl" style="font-size:18px;">雨诗于风</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-70px;">Aimer(工✘)</a>
                   <p style="color:#bdbdbd">4:39</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t8.jpg" class="t8" />
                   <a href="#" class="myl" style="font-size:18px;">四季人生</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-70px;">林晓峰</a>
                   <p style="color:#bdbdbd">3:31</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/t9.jpg" class="t9" />
                   <a href="#" class="myl" style="font-size:18px;">我活着呐《走走停停》电影主...</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-245px;">step.jad依加</a>
                   <p style="color:#bdbdbd">4:52</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt1.jpg" class="tt1" />
                   <a href="#" class="myl" style="font-size:18px;">若你不爱了</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-90px;">胜屿</a>
                   <p style="color:#bdbdbd">3:34</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt2.jpg" class="tt2" />
                   <a href="#" class="myl" style="font-size:18px;">明天六点和你结婚</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-142px;">别问我是海波</a>
                   <p style="color:#bdbdbd">4:03</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt3.jpg" class="tt3" />
                   <a href="#" class="myl" style="font-size:18px;">黄昏街头</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-70px;">陈默之</a>
                   <p style="color:#bdbdbd">2:44</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt4.jpg" class="tt4" />
                   <a href="#" class="myl" style="font-size:18px;">孤单的鱼儿</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-90px;">DJ小鱼儿</a>
                   <p style="color:#bdbdbd">2:56</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt5.jpg" class="tt5" />
                   <a href="#" class="myl" style="font-size:18px;">我会好好的</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-90px;">云汐</a>
                   <p style="color:#bdbdbd">4:09</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt6.jpg" class="tt6" />
                   <a href="#" class="myl" style="font-size:18px;">深情不如旧</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-90px;">李胖肥</a>
                   <p style="color:#bdbdbd">5:17</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt7.jpg" class="tt7" />
                   <a href="#" class="myl" style="font-size:18px;">你是我的英雄《你是我的英雄》</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-250px;">阿云噶</a>
                   <p style="color:#bdbdbd">5:01</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt8.jpg" class="tt8" />
                   <a href="#" class="myl" style="font-size:18px;">Better AT LOVE</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-126px;">Walk Off the Earth /Gianni...</a>
                   <p style="color:#bdbdbd">2:13</p>
               </div>
               <div class="tbox2-1">
                   <img src="img/tt9.jpg" class="tt9" />
                   <a href="#" class="myl" style="font-size:18px;">Walls</a>
                   <br />
                   <a href="#" class="myl1" style="font-size:18px;left:-45px;">刘雨欣</a>
                   <p style="color:#bdbdbd">2:35</p>
               </div>
               <div class="clear"></div>
               <div class="tbox3">
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="tbox3-1"></div>
                   <div class="clear"></div>
               </div>
           </div>
       </div>
       <div class="sbox">
           <p style="margin-left:44%;margin-top:30px;font-size:40px;">精彩推荐</p>
           <div class="sbox1">
               <div class="sbox1-1">
                   <img src="img/s1.jpg" class="s1" />
               </div>
               <div class="sbox1-1">
                   <img src="img/s2.jpg" class="s2" />
               </div>
               <div class="clear"></div>
           </div>
           <div class="sbox2">
               <div class="sbox2-1"></div>
               <div class="sbox2-1"></div>
               <div class="sbox2-1"></div>
               <div class="sbox2-1"></div>
               <div class="sbox2-1"></div>
               <div class="clear"></div>
           </div>
       </div>
       <div class="fbox">
           <p style="margin-left:44%;margin-top:30px;font-size:40px;">新碟首发</p>
           <div class="fbox1">
               <a href="#" class="myl" style="font-size:20px;">内地</a>
               <a href="#" class="myl" style="font-size:20px;">港台</a>
               <a href="#" class="myl" style="font-size:20px;">欧美</a>
               <a href="#" class="myl" style="font-size:20px;">韩国</a>
               <a href="#" class="myl" style="font-size:20px;">日本</a>
           </div>
           <div class="fbox2">
               <div class="fbox2-1">
                   <img src="img/f1.jpg" class="f1" />
                   <a href="#" class="myl" style="font-size:18px;;margin-top:10px">《光与夜之恋》原声音乐集vol.2l</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:2px;top:2px;">光与夜之恋官方音乐账号</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f2.jpg" class="f2" />
                   <a href="#" class="myl" style="font-size:18px;;margin-top:10px">顿悟</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-38px;">周菲戈</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f3.jpg" class="f3" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">再见一面，最后一面</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-160px;">苏星婕</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f4.jpg" class="f4" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">弯月钻石</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-72px;">无法拒接汉堡/DrFree</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f5.jpg" class="f5" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">生日快乐(生日祝福版)</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-172px;">黎林添娇</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f6.jpg" class="f6" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">我是人间一粒沙</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-128px;">魏佳艺</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f7.jpg" class="f7" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">走着走着就散了(粤语版)</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-195px;">车厘子的车车</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f8.jpg" class="f8" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">侥幸者</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-55px;">张远</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f9.jpg" class="f9" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">梨花序</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-55px;">Lil Yo</a>
               </div>
               <div class="fbox2-1">
                   <img src="img/f10.jpg" class="f10" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:10px">新说唱2024第五期(下)</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-180px;">新说唱2024</a>
               </div>
               <div class="clear"></div>
           </div>
           <div class="fbox3">
               <div class="fbox3-1"></div>
               <div class="fbox3-1"></div>
               <div class="clear"></div>
           </div>
       </div>
       <div class="wbox">
           <p style="margin-left:45%;margin-top:30px;font-size:40px;">排行榜</p>
           <div class="wbox1">
               <div class="wbox1-1">
                   <p class="wp">巅峰榜</p>
                   <a href="#" class="wa">热歌</a>
                   <div class="wbox1-1-1"></div>
                   <div class="wbox2">
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">1</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">若月亮没来(若月亮...
                                   <br />
                                   <a href="#" class="wla3">王宇宙Leto/乔浚丞</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">2</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">若月亮没来(Live)
                                   <br />
                                   <a href="#" class="wla3">杨宗纬/宝石Gem/王...</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">3</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">如果可以
                                   <br />
                                   <a herf="#" class="wla3" style="margin-left:-73px;margin-top:30px;">韦礼安</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                   </div>
               </div>
               <div class="wbox1-1">
                   <p class="wp">巅峰榜</p>
                   <a href="#" class="wa">新歌</a>
                   <div class="wbox1-1-1"></div>
                   <div class="wbox2">
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">1</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">诺言(郭有才版)
                                   <br />
                                   <a href="#" class="wla3" style="margin-left:-119px;margin-top:30px;">郭有才</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">2</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">暮色回响
                                   <br />
                                   <a href="#" class="wla3" style="margin-left:-72px;margin-top:30px;">吉星出租</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">3</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">人间半途
                                   <br />
                                   <a herf="#" class="wla3" style="margin-left:-73px;margin-top:30px;">刘阳阳</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                   </div>
               </div>
               <div class="wbox1-1" style="background-color: #5b5cae;">
                   <p class="wp">巅峰榜</p>
                   <a href="#" class="wa" style="margin-left:80px;">流行指数</a>
                   <div class="wbox1-1-1"></div>
                   <div class="wbox2">
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">1</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2" style="margin-left:-6px;">不如回家喝自来水(Liv...
                                   <br />
                                   <a href="#" class="wla3">陈楚生/王赫野</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">2</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">足够(Live)
                                   <br />
                                   <a href="#" class="wla3">张栋梁/银河快递(Ga...</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">3</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">执子之手
                                   <br />
                                   <a herf="#" class="wla3"
                                       style="margin-left:-73px;margin-top:30px;">宝石Gem/一哩哩一</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                   </div>
               </div>
               <div class="wbox1-1" style="background-color: #57af82;">
                   <p class="wp">巅峰榜</p>
                   <a href="#" class="wa">欧美</a>
                   <div class="wbox1-1-1"></div>
                   <div class="wbox2">
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">1</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">Hero(Explicit)
                                   <br />
                                   <a href="#" class="wla3">Charlie Puth</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">2</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2" style="margin-left:-3px">BIRDS OF A FEATHER
                                   <br />
                                   <a href="#" class="wla3">Billie Eillish</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">3</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">SKINNY
                                   <br />
                                   <a herf="#" class="wla3" style="margin-left:-73px;margin-top:30px;">Billie
                                       Eillish</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                   </div>
               </div>
               <div class="wbox1-1" style="background-color: #237567;">
                   <p class="wp">巅峰榜</p>
                   <a href="#" class="wa">韩国</a>
                   <div class="wbox1-1-1"></div>
                   <div class="wbox2">
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">1</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">How Sweet
                                   <br />
                                   <a href="#" class="wla3">NewJeans()</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">2</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">Bubble Gum
                                   <br />
                                   <a href="#" class="wla3">NewJeans()</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                       <li>
                           <div class="wbox2-1"><a href="#" class="wla1">3</a></div>
                           <div class="wbox2-2"><a href="#" class="wla2">(Spring snow)...
                                   <br />
                                   <a herf="#" class="wla3" style="margin-left:-130px;margin-top:30px;">10cm</a></a>
                               <div class="clear"></div>
                           </div>
                       </li>
                   </div>
               </div>
               <div class="clear"></div>
           </div>
       </div>
       <div class="lbox">
           <p style="margin-left:45%;margin-top:30px;font-size:40px;">MV</p>
           <div class="lbox1">
               <a href="#" class="myl" style="font-size:20px;">精选</a>
               <a href="#" class="myl" style="font-size:20px;">内地</a>
               <a href="#" class="myl" style="font-size:20px;">港台</a>
               <a href="#" class="myl" style="font-size:20px;">欧美</a>
               <a href="#" class="myl" style="font-size:20px;">韩国</a>
               <a href="#" class="myl" style="font-size:20px;">日本</a>
           </div>
           <div class="lbox2">
               <div class="lbox2-1">
                   <img src="img/l1.jpg" class="l1" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">SUHO《点线面(1 to 3)》MV</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-233px;">SUHO</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l2.jpg" class="l2" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">我活着呐(《走走停停》电影主题...</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;top:5px;">step.jad依加</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l3.jpg" class="l3" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">一场痛能多久</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-110px;">吴克群</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l4.jpg" class="l4" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">爱的五种语言</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-110px;">唐汉霄</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l5.jpg" class="l5" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">aespa《Armageddon》MV</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-229px;">aespa</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l6.jpg" class="l6" style="height:187.5px;" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">浇给</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-40px;">黄旭/儿几</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l7.jpg" class="l7" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">守护</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-37px;">黄绮珊</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l8.jpg" class="l8" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">一响</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-38px;">周深</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l9.jpg" class="l9" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">所以我</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-55px;">吉克隽逸</a>
               </div>
               <div class="lbox2-1">
                   <img src="img/l10.jpg" class="l10" style="height:187.5px;" />
                   <a href="#" class="myl" style="font-size:18px;margin-top:15px">新说唱2024第五期(下)</a>
                   <br />
                   <a href="#" class="myl2" style="font-size:18px;left:-180px;">新说唱2024</a>
               </div>
           </div>
           <div class="lbox3">
               <div class="lbox3-1"></div>
               <div class="lbox3-1"></div>
               <div class="lbox3-1"></div>
               <div class="lbox3-1"></div>
               <div class="lbox3-1"></div>
               <div class="clear"></div>
           </div>
       </div>
       <div class="qbox">
           <div class="qbox1">
               <a href="#" class="qa1">下载QQ音乐客户端</a>
               <img src="img/qqzh1.jpg" />
               <a href="#" class="qa1" style="margin-top:152px;margin-left:-585px;">PC版</a>
               <a href="#" class="qa1" style="margin-top:152px;margin-left:-421px;">Mac版</a>
               <a href="#" class="qa1" style="margin-top:9px;margin-left:333px;">Android版</a>
               <a href="#" class="qa1" style="margin-top:9px;margin-left:70px;">iPhone版</a>
               <a href="#" class="qa1" style="margin-top:300px;">开发平台</a>
               <br />
               <a href="#" class="qa1" style="margin-top:350px;margin-left:-81px;">QQ音乐开发平台腾讯音乐人音乐推-歌曲推广</a>
               <br />
               <a href="#" class="qa1">启明星Venus-词曲交易/歌曲推广 TME Studio </a>
               <br />
               <a href="#" class="qa1">臻品音质认证</a>
           </div>
           <div class="qbox2">
               <a href="#" class="qa1">特色产品</a>
               <img src="img/qqzh2.jpg" />
               <a href="#" class="qa1" style="margin-top:11px;margin-left:23px;">全民K歌</a>
               <a href="#" class="qa1" style="margin-top:11px;margin-left:84px;">银河音效</a>
               <a href="#" class="qa1" style="margin-top:11px;margin-left:110px;">Qplay</a>
               <a href="#" class="qa1" style="margin-top:-23px;margin-left:486px;">Fan直播伴侣</a>
               <a href="#" class="qa1" style="margin-top:8px;margin-left:21px;">车载互联</a>
               <a href="#" class="qa1" style="margin-top:8px;margin-left:80px;">QQ演出</a>
               <a href="#" class="qa1" style="margin-top:300px;margin-left:-240px;">TME集团出品</a>
               <br />
               <a href="#" class="qa1" style="margin-top:370px;margin-left:-240px;">腾讯音乐</a>
           </div>
           <div class="qbox3">
               <a href="#" class="qa1">合作链接</a>
               <br />
               <a href="#" class="qa1" style="margin-top:100px;margin-left:-81px;">CJ ENM 腾讯视频手机QQ空间</a>
               <br />
               <a href="#" class="qa1">最新版QQ 腾讯社交广告电脑管家</a>
               <br />
               <a href="#" class="qa1">QQ浏览器腾讯微云腾讯云</a>
               <br />
               <a href="#" class="qa1">企鹅FM 智能电视网当贝市场</a>
               <br />
               <a href="#" class="qa1">酷我音乐酷狗听书</a>
           </div>
           <div class="qbox4">
               <a href="#" class="qa1" style="margin-left:300px;">关于腾讯 |About Tencent |服务条款 |用户服务协议 |隐私政策 |权利声明 |广告服务
                   |腾讯招聘 |客服中心 |网站导航 |举报中心</a>
               <br />
               <a href="#" class="qa1" style="margin-left:700px;">Copyright © 1998 - 2024 Tencent. All Rights
                   Reserved.</a>
               <br />
               <a href="#" class="qa1" style="margin-left:200px;">腾讯公司
                   版权所有｜营业执照｜网络文化经营许可证：粤网文[2023]2882-203号｜客服电话：4006016666｜违法与不良信息举报邮箱：tme_musicjubao@tencentmusic.com</a>
           </div>
       </div>
   </body>
</html>