前言

本文主要讲述了网易云音乐首页的热门推荐歌单部分的实现过程，我将从先分析大致结构与布局，其次书写样式的顺序进行讲解，在这个过程中将会运用到浮动，定位，以及雪碧图等相关知识点（这些在以往的文章中都有介绍到，感兴趣的小伙伴可以动手翻阅一下，我在这里就不加以赘述）

一、结构的布局

示例图：

结构的分析——

(在写布局时我们可以按照从外到内，从上到下的思想，从整体到局部分析应有的结构，将大致框架固定随后再书写其样式)

首先，引入眼帘的是标题部分，大致可分为左右两个区域并将其各自浮动进行位置的固定，左侧的红色图标就是利用到雪碧图的使用方法，我们可将红色按钮与标题归为同一个结构中，随后的歌单分类可以用 ul 包裹并将其中li 进行左浮动即可。其次就是右侧的更多按钮，在这里就可以使用右浮动实现，右侧的箭头图标也是采用雪碧图的形式。如下图所示：

2. 其次就是下方的歌单区域，可先将其用一个整体的框架将其位置固定，随后再书写每个歌单的结构与样式，（在这里我们只要完成其中一个歌单，其他的通过复用结构的方法再修改其样式即可完成）下图表示的就是结构的划分

二、实现过程

1.HTML结构

代码如下（示例）：

 <!-- 热门推荐外部容器 --><div class="total-hot"><!--头部标题--><div class="title"><div class="red"><a href="#" class="title-description">热门推荐</a></div><ul class="title-left"><li><a href="#">华语</a></li><li class="line">|</li><li><a href="#">流行</a></li><li class="line">|</li><li><a href="#">摇滚</a></li><li class="line">|</li><li><a href="#">民谣</a></li><li class="line">|</li><li><a href="#">电子</a></li></ul><div class="title-right"><a href="#" class="more">更多&nbsp;&nbsp;</a><i class="red-arrow"></i></div></div><!-- 热门推荐歌单列表 --><ul class="CD-list"><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li id="four"><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li><li><!-- 歌单图片 --><a href="#"><img src="./img/CD-list1.jpg" alt=""><div class="img-bottom"><span class="listen"></span><span class="number">1241万</span><a href="#" class="play"></a></div></a><!-- 歌单的描述文字 --><span class="CD-description"><a href="#">我要你的光芒，来点亮我内心的诗意</a></span></li></ul></div>

2.CSS样式

代码如下（示例）：

/* 热门推荐总体容器样式设置 */
.total-hot {width: 689px;height: 523px;margin-bottom: 40px;
}.title {height: 35px;line-height: 35px;padding: 0px 10px 0px 34px;border-bottom: 2px solid #C10D0C;
}.red {display: inline-block;background-image: url(../img/index.png);background-position: -225px -156px;position: relative;left: -34px;
}.red>a {display: inline-block;font-size: 20px;height: 30px;line-height: 30px;width: 110px;margin-left: 6px;text-align: right;}.title-description {color: #333333;
}.title-left {position: relative;top: -25px;left: 100px;
}.title-left>li {float: left;font: 12px Arial, Helvetica, sans-serif;
}.line {color: #cccccc;margin: 0px 10px;
}.title-left>li>a {color: #666666;
}.hot-recommend {position: relative;top: 4px;left: -30px;color: #333333;font: 20px Arial, Helvetica, sans-serif !important;
}.title-right {height: 35px;line-height: 35px;position: relative;top: -35px;float: right;
}.title-right>a {font: 12px Arial, Helvetica, sans-serif;color: #666666;
}/* 推荐歌单列表样式设置 */
.CD-list {width: 731px;height: 458px;margin: 20px 0px 0px -42px;
}.CD-list>li {width: 140px;height: 194px;padding: 0px 0px 30px 42px;float: left;
}#four {position: relative;top: -13px;
}.CD-list li>a {display: inline-block;width: 140px;height: 140px;
}.img-bottom {display: inline-block;width: 140px;height: 27px;position: relative;top: -29px;background-image: url(../img/背景.png);background-position: 0 -537px;
}.img-bottom .listen {background-image: url(../img/播放按钮.png);background-position: 0 -24px;float: left;width: 14px;height: 11px;margin: 8px 5px 9px 10px;
}.number {float: left;font-size: 12px;margin: 7px 0px 0px 0px;
}.play {position: absolute;right: 10px;bottom: 5px;width: 16px;height: 17px;background-image: url(../img/播放按钮.png);background-position: 0 0;
}.img-bottom span,
.img-bottom a {color: #ccc;font-size: 12px;
}.CD-description {position: relative;top: -23px;line-height: 18px;
}.CD-description a {font-size: 14px;color: #000000;
}.CD-description:hover a {text-decoration: underline;
}

总结

那么以上就是今天所要讲述的内容，关于网易云音乐首页的实现我会归纳为一个系列，希望可以帮助到你吧，今天依旧祝福看到这篇文章的朋友有个好心情，拜~

CSS——网易云音乐首页之热门推荐歌单的制作相关推荐

java爬虫实战（3）：网易云音乐评论，歌曲，歌单，歌词下载
java爬虫实战(3):网易云音乐评论,歌曲,歌单,歌词下载 *本实战仅作为学习和技术交流使用,转载请注明出处: *此文章很早便在草稿箱中,由于编写时事情较多,临时中断,现暂时发表,后续补上(2019 ...
CSS——网易云音乐首页之榜单区域的实现
文章目录前言一.结构的布局 1.示例图 2.结构分析二.实现过程 1.HTML结构 2.CSS样式总结前言本文主要介绍了网易云音乐首页榜单区域的实现过程. 一.结构的布局示例图: 结构分 ...
CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录前言一.结构的分析二.使用步骤 1.HTML结构 2.CSS样式总结前言本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
岁月如歌：盘点网易云音乐上关于怀旧的歌单
单独开了一个专栏,希望与大家一起分享音乐.在此之前抓取了网易云音乐的曲库,接下来将对曲库中的歌曲按照类别进行整理并且推荐给大家. 专栏已整理分享歌单如下(点击前往): 日语歌单. 放松歌单. ACG ...
Scrapy 爬取网易云音乐播放量百万以上的歌单以及歌单详情
创建爬虫查看歌单链接 https://music.163.com/#/discover/playlist 用 requests 下载此链接的网页发现不是原网页,应该是被跳转到了登录页面.分析之后得到 ...
WPF仿网易云音乐系列（二、歌单创建窗口+登录设置模块）
老衲牺牲午休时间写博客,都快把自己感动了,-_-!! 之前上一篇随笔,我看了下评论,有部分人说WPF已经凉凉了,这个我觉得,这只是一个达到自己目的的工具而已,只要自己能用这个工具,得心应手的做出自己想 ...
HTML+CSS实现网易云音乐首页的主播电台页面
HTML+CSS实现网易云音乐首页的主播电台页面这个页面首先使用了css的定位(postion)属性.弹性盒子(display)属性以及VM与REM,图标使用了阿里巴巴矢量图标库的矢量图标.下面让我 ...
带你手把手撸一个网易云音乐首页（上篇）
标题前言 Hello,大家好,近期我一直在学习用 Swift 编码,由于之前很多项目我都是用 OC 实现的,所以导致我现在对 Swift 还是处于一个学习的阶段中.为了提高自己的学习效率,每次我都会为 ...
20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...

CSS——网易云音乐首页之热门推荐歌单的制作

文章目录

前言