歌单（新歌榜，热歌榜，网络歌曲榜）

最新推荐文章于 2025-05-06 08:19:48 发布

桃花加酥

最新推荐文章于 2025-05-06 08:19:48 发布

阅读量640

点赞数 16

分类专栏：网页设计文章标签： css 前端 html

本文链接：https://blog.csdn.net/2301_81323885/article/details/136738617

版权

网页设计专栏收录该内容

14 篇文章

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .oneBox{
        width: 300px;
        float: left;
        height: 600px;
        background-color: rgb(250, 250, 250);
        color:#478600;
        border-color: black;
        background-image: url(../微信图片_20231122150348.png) ;
        background-repeat: repeat-x;
       }
       span{
        color: #595954;
        font-size: 14px;
        vertical-align: top;
      }
      .twoBow{
        width: 300px;
        height: 600px;
        background-color: rgb(250, 250, 250);
        color:#d84a00;
        border-color: red;
        background-image: url(../微信图片_20231122215200.jpg);
        background-repeat: repeat-x;
        float: left;
    }
    .threeBox{
        width: 300px;
        height: 600px;
        background-color: rgb(250, 250, 250);
        color:#1ebea4;
        border-color: lightblue;
        background-image: url(../微信图片_20231122150315.png);
        background-repeat: repeat-x;
        float: left;
    }
     
    </style>
</head>
<body>
    <div class="oneBox">
        <h1>新歌榜 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="../微信图片_20231122150340.png" alt=""></h1>
        <h1>01&nbsp;<img src="../微信图片_20231122145113.jpg" alt="" > <span >少年（童版）宋晓睿</span></h1>
        <h1>02 <img src="../微信图片_20231122150304.jpg" alt=""> <span>拥抱春&nbsp;&nbsp;A公馆</span></h1>
        <h1>03 <img src="../微信图片_20231122145041.jpg" alt=""> <span>山河无恙在我胸-蔡..</span></h1>
        <h1>04 <img src="../微信图片_20231122150239.jpg" alt=""> <span>FightasONE陈奕蔡..</span></h1>
        <h1>05 <img src="../微信图片_20231122150235.jpg" alt="">  <span>只要平凡韩</span></h1>
        <h1>06 <img src="../稳住.jpg" alt=""> <span>稳住 李思光</span></h1>
     </div>
     &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&emsp; &emsp; &emsp; &emsp; &emsp;&emsp; &emsp;
     
         <div class="twoBow">
   <h1>热歌榜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="../微信图片_20231122150337.png" alt=""></h1>
   <h1>01  <img src="../微信图片_20231122144852.jpg" alt="">  <span>桥边姑娘 舞蹈女神若涵</span></h1>
   <h1>02&nbsp;<img src="../微信图片_20231122145113.jpg" alt="" > <span >少年（童声版）宋晓睿</span></h1>
   <h1>03 <img src="../微信图片_20231122144822.jpg" alt=""> <span>大鱼 周深</span></h1>
   <h1>04 <img src="../微信图片_20231122150307.jpg" alt=""> <span>演员 薜之谦</span></h1>
   <h1>05 <img src="../微信图片_20231122144857.jpg" alt=""> <span>桥边姑娘 垂耳兔</span></h1>
   <h1>06 <img src="../微信图片_20231122145013.jpg" alt="">  <span>逆流成河 金南玲</span></h1>
    </div>
    &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;                            
                                                                                                                                                                                     
    <div class="threeBox">
        <h1>网络歌曲榜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../微信图片_20231122150345.png" alt=""></h1>
        <h1>01 <img src="../微信图片_20231122144845.jpg" alt=""> <span>记忆里的雪 龙梅子</span></h1>
        <h1>02  <img src="../微信图片_20231122150228.jpg" alt=""> <span>听你 大庆小芳</span></h1>
        <h1>03  <img src="../微信图片_20231122145009.jpg" alt=""> <span> 共同站疫  乌兰图雅       </span></h1>
        <h1>04  <img src="../微信图片_20231122145016.jpg" alt=""> <span>有一种爱 冷漠</span></h1>
        <h1>05 <img src="../微信图片_20231122144834.jpg" alt="">  <span>太多 慕容晓晓冯伟杰</span></h1>
        <h1>06 <img src="../微信图片_20231122144911.jpg" alt="">  <span>勇士的荣耀龙梅子郭晨冬</span></h1>
    </div>
</body>
</html

效果图如下：