【前端基础小案例】HTML+CSS实现酷狗音乐热榜效果

短命女 2024-04-26 03:23 63阅读 0赞

> ?一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去?  
> ? 欢迎关注?点赞?收藏?留言?  
> ? 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> ? 系列专栏：[前端基础小案例&小项目][Link 2]  
> ? 首发时间：2022年8月24日  
> ✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

#### 阅读指南 ####

*  一、前期准备
 *  二、效果展示
 *  三、具体实现
 *  五、源码

## 一、前期准备 ##

案例素材可以通过下方链接下载

[https://pan.baidu.com/s/190MuQO2yrjNRYI48quugtg?pwd=976p][https_pan.baidu.com_s_190MuQO2yrjNRYI48quugtg_pwd_976p]

## 二、效果展示 ##

实现如下图的效果：  
![在这里插入图片描述][ba1b8742d2a64d2e893d932ecb0c69e3.png]  
温馨提示：代码注释前面有 “`=========`” 标记的即为较之前面修改的代码

## 三、具体实现 ##

*  基本框架 
    
    代码：
    
        <div class="music_hot"></div>
    
        <style>
            /* 消除内外边距 */
            * {
              
                margin: 0;
                padding: 0;
            }
        
            .music_hot {
              
                width: 350px;
                height: 500px;
                border: 1px solid red;
                /* 水平居中 */
                margin: 50px auto 0;
            }
        </style>
    
    效果为：  
    ![在这里插入图片描述][af08f6fc1351403b90183c8557963cc2.png]
 *  构建热门榜单区块 
    
    代码修改处为：
    
        <div class="music_hot">
            <h3>
                <span><i>热门</i>榜单</span>
                <a href="#">更多</a>
            </h3>
        </div>
    
        a {
              
            /* 去掉下划线 */
            text-decoration: none;
        }
        
        .music_hot h3 {
              
            border: 1px solid #000;
            /* 设置文字不加粗 */
            font-weight: 100;
            height: 40px;
            line-height: 40px;
        }
        
        .music_hot h3 span {
              
            font-size: 28px;
        }
        
        .music_hot h3 span i {
              
            color: #00a7f6;
            /* 去掉斜体效果 */
            font-style: normal;
        }
        
        .music_hot h3 a {
              
            /* 右浮动 */
            float: right;
            font-size: 16px;
            color: #9c9e9c;
        }
    
    效果如下：  
    ![在这里插入图片描述][93fb78da7d6643a9be3e531aae1c805f.png]
 *  下面三个榜单其实原理一样，所以我们只要写出一个，然后复制修改一下即可
    
    先写出基本的样子
    
    代码修改处为：
    
        <div class="music_hot">
            <h3>
                <span><i>热门</i>榜单</span>
                <a href="#">更多</a>
            </h3>
            <div class="item">
                <div class="item-img"></div>
                <div class="item-text"></div>
            </div>
            <div class="item">
                <div class="item-img"></div>
                <div class="item-text"></div>
            </div>
            <div class="item">
                <div class="item-img"></div>
                <div class="item-text"></div>
            </div>
        </div>
    
        .music_hot .item {
              
            height: 98px;
            background-color: #f6f6f6;
            margin-top: 20px;
        }
        
        .music_hot .item .item-img {
              
            float: left;
            width: 98px;
            height: 98px;
            background-color: skyblue;
        }
        
        .music_hot .item .item-text {
              
            float: right;
            width: 232px;
            height: 98px;
            background-color: pink;
        }
    
    效果如下：
    
    ![在这里插入图片描述][d7d3c4488d0f487d81fcfe6b64233a28.png]
 *  添加内容
    
    代码修改处为：
    
        <div class="music_hot">
            <h3>
                <span><i>热门</i>榜单</span>
                <a href="#">更多</a>
            </h3>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav1.jpg" alt="飙升榜" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗飙升榜</h4>
                    <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav2.jpg" alt="TOP500" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗TOP500</h4>
                    <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav3.jpg" alt="网络红歌榜" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗网络红歌榜</h4>
                    <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
        </div>
    
        .music_hot .item .item-text {
              
            float: right;
            width: 232px;
            height: 98px;
            background-color: pink;
            /* ========添加小箭头 */
            background: url(../images/arrow.png) no-repeat right center;
        }
        
        /* ====== */
        .music_hot .item .item-text h4 {
              
            font-size: 14px;
            padding: 8px 0px;
        }
        
        .music_hot .item .item-text p {
              
            font-size: 14px;
            color: #555;
            line-height: 25px;
        }
        
        .music_hot .item .item-text p span {
              
            color: #999;
        }
        
        .music_hot .item .item-text p a {
              
            color: #555;
        }
        
        .music_hot .item .item-text p a:hover {
              
            color: #ff627f;
        }
        
        .music_hot .item .item-text p a:hover span {
              
            color: #ff627f;
        }
 *  去除多余边框
    
    最终效果如下：  
    ![在这里插入图片描述][ba1b8742d2a64d2e893d932ecb0c69e3.png]

## 五、源码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>酷狗音乐精选歌单</title>
        <style>
            /* 消除内外边距 */
            * {
          
                margin: 0;
                padding: 0;
            }
    
            .music_hot {
          
                width: 350px;
                /* 水平居中 */
                margin: 50px auto 0;
            }
    
            a {
          
                /* 去掉下划线 */
                text-decoration: none;
            }
    
            .music_hot h3 {
          
                /* 设置文字不加粗 */
                font-weight: 100;
                height: 40px;
                line-height: 40px;
            }
    
            .music_hot h3 span {
          
                font-size: 28px;
            }
    
            .music_hot h3 span i {
          
                color: #00a7f6;
                /* 去掉斜体效果 */
                font-style: normal;
            }
    
            .music_hot h3 a {
          
                /* 右浮动 */
                float: right;
                font-size: 16px;
                color: #9c9e9c;
            }
    
            .music_hot .item {
          
                height: 98px;
                background-color: #f6f6f6;
                margin-top: 20px;
            }
    
            .music_hot .item .item-img {
          
                float: left;
                width: 98px;
                height: 98px;
                background-color: skyblue;
            }
    
            .music_hot .item .item-text {
          
                float: right;
                width: 232px;
                height: 98px;
                background-color: pink;
                /* ========添加小箭头 */
                background: url(../images/arrow.png) no-repeat right center;
            }
    
            /* ====== */
            .music_hot .item .item-text h4 {
          
                font-size: 14px;
                padding: 8px 0px;
            }
    
            .music_hot .item .item-text p {
          
                font-size: 14px;
                color: #555;
                line-height: 25px;
            }
    
            .music_hot .item .item-text p span {
          
                color: #999;
            }
    
            .music_hot .item .item-text p a {
          
                color: #555;
            }
    
            .music_hot .item .item-text p a:hover {
          
                color: #ff627f;
            }
    
            .music_hot .item .item-text p a:hover span {
          
                color: #ff627f;
            }
        </style>
    </head>
    
    <body>
        <div class="music_hot">
            <h3>
                <span><i>热门</i>榜单</span>
                <a href="#">更多</a>
            </h3>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav1.jpg" alt="飙升榜" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗飙升榜</h4>
                    <p><a href="https://www.kugou.com/song/#hash=ABF52961025B59E8DA15822B7C06BC29&album_id=30616743"
                            target="_blank">1 .
                            隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="https://www.kugou.com/song/#hash=0F81E8E9BA21FB024F4B7BD26CE6EBD2&album_id=59154788"
                            target="_blank">2 .
                            把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav2.jpg" alt="TOP500" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗TOP500</h4>
                    <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
            <div class="item">
                <div class="item-img">
                    <a href="#">
                        <img src="../images/nav3.jpg" alt="网络红歌榜" width="98">
                    </a>
                </div>
                <div class="item-text">
                    <h4>酷狗网络红歌榜</h4>
                    <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                    <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
                </div>
            </div>
        </div>
    </body>
    
    </html>

> ? 这次的分享就到这里啦，继续加油哦^^  
> ? 我是[程序喵][Link 1]，陪你一点点进步  
> ? 有出错的地方欢迎在评论区指出来，共同进步，谢谢啦

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[Link 2]: https://blog.csdn.net/weixin_62511863/category_11974950.html?spm=1001.2014.3001.5482
[https_pan.baidu.com_s_190MuQO2yrjNRYI48quugtg_pwd_976p]: https://pan.baidu.com/s/190MuQO2yrjNRYI48quugtg?pwd=976p
[ba1b8742d2a64d2e893d932ecb0c69e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/55f0bb230e8646768bd42967a8d8c115.png
[af08f6fc1351403b90183c8557963cc2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c9aae8dfc7144eac853b79ccaa34956a.png
[93fb78da7d6643a9be3e531aae1c805f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9385e2930daf4613a16fce5651b56c26.png
[d7d3c4488d0f487d81fcfe6b64233a28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6788534e9883448397a1b8dc3a352374.png