admin管理员组文章数量:1650879
🔥一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去🎶
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🦄 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：前端基础小案例&小项目
🌠 首发时间：2022年8月24日
✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦
阅读指南
- 一、前期准备
- 二、效果展示
- 三、具体实现
- 五、源码
一、前期准备
案例素材可以通过下方链接下载
https://pan.baidu/s/190MuQO2yrjNRYI48quugtg?pwd=976p
二、效果展示
实现如下图的效果：
温馨提示：代码注释前面有 “=========” 标记的即为较之前面修改的代码
三、具体实现
-
基本框架
代码：
<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>效果为：
-
构建热门榜单区块
代码修改处为：
<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; }效果如下：
-
下面三个榜单其实原理一样，所以我们只要写出一个，然后复制修改一下即可
先写出基本的样子
代码修改处为：
<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; }效果如下：
-
添加内容
代码修改处为：
<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; } -
去除多余边框
最终效果如下：
五、源码
<!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/song/#hash=ABF52961025B59E8DA15822B7C06BC29&album_id=30616743"
target="_blank">1 .
隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
<p><a href="https://www.kugou/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>
🧸 这次的分享就到这里啦，继续加油哦^^
🐱 我是程序喵，陪你一点点进步
🍭 有出错的地方欢迎在评论区指出来，共同进步，谢谢啦
版权声明：本文标题：【前端基础小案例】HTML+CSS实现酷狗音乐热榜效果 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1729548692a1205957.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论