【前端基础小案例】HTML+CSS实现酷狗音乐热榜效果
生活随笔
收集整理的這篇文章主要介紹了
【前端基础小案例】HTML+CSS实现酷狗音乐热榜效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🔥一個人走得遠了，就會忘記自己為了什么而出發，希望你可以不忘初心，不要隨波逐流，一直走下去🎶
🦋 歡迎關注🖱點贊👍收藏🌟留言🐾
🦄 本文由 程序喵正在路上 原創，CSDN首發！
💖 系列專欄：前端基礎小案例&小項目
🌠 首發時間：2022年8月24日
? 如果覺得博主的文章還不錯的話，希望小伙伴們三連支持一下哦
閱讀指南
- 一、前期準備
- 二、效果展示
- 三、具體實現
- 五、源碼
一、前期準備
案例素材可以通過下方鏈接下載
https://pan.baidu.com/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.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>🧸 這次的分享就到這里啦，繼續加油哦^^
🐱 我是程序喵，陪你一點點進步
🍭 有出錯的地方歡迎在評論區指出來，共同進步，謝謝啦
總結
以上是生活随笔為你收集整理的【前端基础小案例】HTML+CSS实现酷狗音乐热榜效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【OpenCV自学笔记】DYA3 测试旧
- 下一篇： 一个大二前端的2017自我总结