0
0

【前端】QQ音乐

<!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｜违法与不良信息举报邮箱：[email protected]</a>
         </div>
     </div>
 </body>
</html>
标签： 前端 css javascript
本文转载自: https://blog.csdn.net/Stunning501/article/details/139815357
版权归原作者 是个帅哥哎 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【前端】QQ音乐”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

物联网（IoT）基础的家庭安全解决方案：重点关注Arduino应用

【k8s】资源限制管理：Namespace、Deployment与Pod的实践

pytest 通过实例讲清单元测试、集成测试、测试覆盖率

IDEA查看Jar包是由哪个依赖引入的，并去除对应的jar包

开源模型应用落地-qwen模型小试-Qwen2.5-7B-Instruct-tool usage入门-集成心知天气（二）

前端必备技能：全面解析 Cookie 在 Web 开发中的应用

Spring MVC 中是如何保证Controller的并发安全？

文章导航