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

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

    阅读指南

    一、前期准备

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

    https://pan.baidu.com/s/190MuQO2yrjNRYI48quugtg?pwd=976p

    二、效果展示

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

    三、具体实现

    • 基本框架

      代码：

      <div class="music_hot">div>

      • 1
      

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15

      效果为：
      在这里插入图片描述

    • 构建热门榜单区块

      代码修改处为：

      <div class="music_hot">
    <h3>
        <span><i>热门i>榜单span>
        <a href="#">更多a>
    h3>
div>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      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;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29

      效果如下：
      在这里插入图片描述

    • 下面三个榜单其实原理一样，所以我们只要写出一个，然后复制修改一下即可

      先写出基本的样子

      代码修改处为：

      <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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      .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;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19

      效果如下：

      在这里插入图片描述

    • 添加内容

      代码修改处为：

      <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>酷狗TOP500h4>
            <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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      .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;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36

    • 去除多余边框

      最终效果如下：
      在这里插入图片描述

    五、源码

    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>酷狗TOP500h4>
                <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152

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

  • 相关阅读:
    python代码：VOC to cityscapes标注文件转换
    Mac电脑软件开发的优缺点
    sql explain
    电脑磁盘分区形式是什么？如何更改？
    [论文阅读] (24) 向量表征：从Word2vec和Doc2vec到Deepwalk和Graph2vec，再到Asm2vec和Log2vec(上)
    C++11特性——右值引用
    Python自动化系统6
    java基于ssm房屋出售租赁管理系统
    一篇文章带你搞懂MybatisPlus
    Go并发编程和调度器
  • 原文地址：https://blog.csdn.net/weixin_62511863/article/details/126455973