前言
网易云静态页面——导航栏
网易云静态页面——轮播图
网易云静态页面——主页面右侧部分
Flex布局详解
热门推荐
完成如下页面的制作：
header的封装
由于热门推荐那一块的标题不止在一处出现，所以我们可以将其进行封装，然后我们直接使用相应的标签并且给一个相应的类名它的样式就出现了。
下面是html结构
<!-- 内容左侧部分 -->
<div class="area-left">
<!-- 热门推荐部分 -->
<div class="recommend">
<!-- 标题 -->
<div class="header_type_02">
<!-- 标题左边部分 -->
<div class="header_left">
<!-- 标题名 -->
<a href="#" class="title">热门推荐</a>
<!-- 标题类别 -->
<ul class="list">
<li><a href="#" class="item">华语</a></li>
<li><a href="#">｜</a></li>
<li><a href="#" class="item">流行</a></li>
<li><a href="#">｜</a></li>
<li><a href="#" class="item">摇滚</a></li>
<li><a href="#">｜</a></li>
<li><a href="#" class="item">民谣</a></li>
<li><a href="#">｜</a></li>
<li><a href="#" class="item">电子</a></li>
</ul>
</div>
<!-- 标题右边部分 -->
<div class="header_right">
<a href="#" class="more">更多</a>
</div>
</div>
</div>
</div>
/* main */
.area .area-left{
width: 730px;
border-right: 1px solid #d3d3d3;
/* 算上右边框总宽度也是730px */
box-sizing: border-box;
padding: 20px;
}
/* header */
/* header_type_02 */
.header_type_02{
/* 边框也算在高度内 */
box-sizing: border-box;
/* 相对定位 */
position: relative;
/* 浮动布局，让header的左侧内容和右侧内容在同一行排列 */
display: flex;
/* 使左右侧部分之间有一定的间距，分别且挨着边框 */
justify-content: space-between;
height: 35px;
/* 红色底边框 */
border-bottom: 2px solid #C10D03;
/* 标题左边红色圆圈标志是用背景图来实现的 */
background: url(../images/main_01.png) -225px -156px no-repeat;
/* 使header的内容距离左边（红色圆圈标志）有一定的间距 */
padding-left: 35px;
}
.header_type_02 .title{
/* 文字大小 */
font-size: 20px;
/* 文字颜色 */
color: #333;
/* 字体样式 */
font-family: ont-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;;
}
.header_type_02 .header_left{
/* 浮动布局，使左侧内容在同一行排列 */
display: flex;
}
.header_type_02 .list{
/* 浮动布局，使标题类别这个列表的子元素在同一行排列 */
display: flex;
/* 字体大小 */
font-size: 12px;
/* 使这个列表距离标题有一定的间距 */
margin-left: 15px;
/* 调整列表向下移动一定的距离 */
margin-top: 6px;
}
.header_type_02 .list a{
/* 列表子元素字体的颜色 */
color: #666;
/* 使列表子元素间有一定的距离 */
margin: 0 5px;
}
.header_type_02 .header_right .more{
/* 将a标签转换为行内块级元素，从而可以设置他的margin-top（行内级元素margin上下设置无效） */
display: inline-block;
/* 字体大小 */
font-size: 12px;
/* 字体颜色 */
color: #666;
/* 使其距离左边框有一定的距离 */
padding-right: 25px;
/* 使其向下移动一定的距离 */
padding-top: 10px;
}
.header_type_02 .header_right .more:hover{
/* 鼠标放上面时出现下划线 */
text-decoration: underline;
}
/* “更多”后面红色箭头的实现 */
.header_type_02::after{
content: "";
position: absolute;
/* 设置宽高 */
width: 12px;
height: 12px;
/* 设置偏移量 */
right: 8px;
bottom: 8px;
/* 字体样式 */
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
/* 用背景图实现 */
background: url(../images/main_01.png) 0 -240px no-repeat;
}
.header_type_02 .header_left .list .item:hover{
/* 鼠标放上面时出现下划线 */
text-decoration: underline;
}
页面如下：
这时我们在建立主页面左边第二个部分的标题——新碟上架。在上面的html代码后面添加如下即可，不用额外的css代码：
<div class="disc">
<div class="header_type_02">
<div class="header_left">
<a href="#" class="title">新碟上架</a>
</div>
<div class="header_right">
<a href="#" class="more">更多</a>
</div>
</div>
</div>
页面如下：
热门推荐内容
<!-- 热门推荐的内容 -->
<div class="content">
<!-- 一共有八个子元素（item） -->
<div class="item">
<!-- 图片部分 -->
<div class="pic">
<img src="./images/pic_01.jpeg" alt="">
<!-- 图片底部的图标 -->
<div class="bottom">
<!-- 头戴式耳机图标 -->
<div class="icon"></div>
<!-- 人数显示 -->
<div class="number">2518万</div>
<!-- 播放图标 -->
<a href="#" class="play"></a>
</div>
</div>
<!-- 每个子元素的描述 -->
<p class="disc">假如能回到过去，你想做什么</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_02.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">4845万</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc">2023超好听的爆火歌曲推荐（持更）</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_03.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">2840万</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc">别整太大鸭力，要多鸡立自己</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_04.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">25366</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc"><i></i>他们的歌里，把人生唱尽了</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_05.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">2380万</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc">【万评电音】抬头，已是一片心海</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_06.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">149万</div>
<a href="#" class="play"></a>
</div></div>
<p class="disc"><i></i>信息素说我们不可能 第一集</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_07.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">2397万</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc">[纯音乐]错落一身宁静，深海浮沉摘星</p>
</div>
<div class="item">
<div class="pic">
<img src="./images/pic_08.jpeg" alt="">
<div class="bottom">
<div class="icon"></div>
<div class="number">489万</div>
<a href="#" class="play"></a>
</div>
</div>
<p class="disc"><i></i>指纹（张碧晨；小鬼）</p>
</div>
</div>
/* main */
/* 热门推荐部分 */
.area-left .recommend .content{
/* 浮动布局，让content子元素全部排列在同一行 */
display: flex;
/* 此时宽度会被压缩，让其换行排列宽度就不会被压缩了 */
flex-wrap: wrap;
/* 让其换行排列后，使每个子元素间有一定的间距，且左右边上的两个元素紧靠边框 */
justify-content: space-between;
margin-bottom: 50px;
}
.area-left .recommend .content .item{
margin-bottom: 15px;
}
/* 图片背景 */
.area-left .recommend .content .item .pic{
/* 设置相对定位，方便其子元素bottom定位 */
position: relative;
border: 1px solid #ccc;
/* 固定宽高 */
width: 140px;
height: 140px;
background-color: red;
/* 让它距离热门推荐下边框有一定的距离 */
margin: 20px 0 0px 0;
/* 当鼠标放上pic时显示小手 */
cursor: pointer;
}
.area-left .recommend .content .item .pic .bottom{
/* pic的底部部分，通过绝对定位移动到pic的底部 */
position: absolute;
/* 设置偏移量 */
bottom: 0;
/* 浮动布局，让其子元素在同一行排列 */
display: flex;
/* 让其子元素垂直居中 */
align-items: center;
/* 固定宽高 */
width: 140px;
height: 27px;
/* 它的背景是用背景图做成的 */
background: url(../images/main_03.png) 0 -537px;
/* 当鼠标放上时鼠标显示默认值 */
cursor: default;
}
/* 每个pic下面的描述 */
.area-left .recommend .content .item .disc{
/* 字体大小设置 */
font-size: 14px;
/* 宽度固定 */
width: 140px;
/* 使这段文字描述距离pic有一定的距离 */
margin-top: 8px;
/* 当鼠标放上去时显示小手 */
cursor: pointer;
}
/* 鼠标放上描述时文字出现下划线 */
.area-left .recommend .content .item .disc:hover{
text-decoration: underline;
}
/* bottom里的“头戴式耳机”图标 */
.area-left .recommend .item .bottom .icon{
/* 固定宽高 */
width: 14px;
height: 11px;
/* 用背景图来实现的 */
background: url(../images/small_button.png) 0 -24px;
/* 调整它的左外边距 */
margin-left: 10px;
}
/* bottom里人数显示 */
.area-left .recommend .item .bottom .number{
font-size: 12px;
color: #ccc;
margin-left: 5px;
}
/* bottom里的“播放”图标 */
.area-left .recommend .item .bottom .play{
/* 固定宽高 */
width: 16px;
height: 17px;
background: url(../images/small_button.png) 0 0;
margin-left: 45px;
}
/* 电台节目图标 */
.area-left .recommend .item .disc i{
/* 将其转换为行内块元素从而可以设置其宽高 */
display: inline-block;
width: 35px;
height: 15px;
vertical-align: middle;
padding-bottom: 4px;
padding-right: 7px;
background: url(../images/main_04.png) -31px -658px;
}
页面如下：
新碟上架
<!-- 新碟上架部分 -->
<div class="disc">
<!-- 新碟上架标题 -->
<div class="header_type_02">
<div class="header_left">
<a href="#" class="title">新碟上架</a>
</div>
<div class="header_right">
<a href="#" class="more">更多</a>
</div>
</div>
<!-- 新碟上架内容部分，这里用了两个div，分别都设置了边框 -->
<div class="disc_area">
<!-- 第二个div -->
<div class="disc_content">
<!-- 列表内容 -->
<ul class="list">
<!-- 列表中的单个子元素 -->
<li class="item">
<!-- 封面，也就是显示的图片部分 -->
<div class="album">
<!-- 跟歌曲相关的图片 -->
<img src="./images/album_01.jpeg" alt="">
<!-- 图片后面的黑色光碟部分 -->
<a href="#" class="mask"></a>
<!-- 鼠标放上封面显示播放按钮 -->
<a href="#" class="play"></a>
</div>
<!-- 歌曲名 -->
<a href="#" class="desc">Young Fresh Chin II</a>
<!-- 作者 -->
<a href="#" class="author">夏之禹</a>
</li>
<li class="item">
<div class="album">
<img src="./images/album_02.jpeg" alt="">
<a href="#" class="mask"></a>
<a href="#" class="play"></a>
</div>
<a href="#" class="desc">LOVE+PEACE</a>
<a href="#" class="author">平井 大</a>
</li>
<li class="item">
<div class="album">
<img src="./images/album_03.jpeg" alt="">
<a href="#" class="mask"></a>
<a href="#" class="play"></a>
</div>
<a href="#" class="desc">- (Deluxe)</a>
<a href="#" class="author">Ed Sheeran</a>
</li>
<li class="item">
<div class="album">
<img src="./images/album_04.jpeg" alt="">
<a href="#" class="mask"></a>
<a href="#" class="play"></a>
</div>
<a href="#" class="desc">世界/青年</a>
<a href="#" class="author">房东的猫</a>
</li>
<li class="item">
<div class="album">
<img src="./images/album_05.jpeg" alt="">
<a href="#" class="mask"></a>
<a href="#" class="play"></a>
</div>
<a href="#" class="desc">WIND AND WISH</a>
<a href="#" class="author">BTOB</a>
</li>
</ul>
<!-- 左右按钮 -->
<div class="btn left_btn"></div>
<div class="btn right_btn"></div>
</div>
</div>
</div>
/* main */
/* 新碟上架部分 */
.area-left .disc .disc_area{
/* 第一个div */
width: 689px;
height: 188px;
box-sizing: border-box;
margin-top: 20px;
border: 1px solid #d3d3d3;
}
.area-left .disc_area .disc_content{
/* 第二个div */
/* 设置相对定位是为了让按钮进行绝对定位 */
position: relative;
width: 100%;
height: 186px;
box-sizing: border-box;
border: 1px solid #fff;
background-color: #f5f5f5;
}
.area-left .disc_content .list{
/* 浮动布局，让list子元素在同一行排列 */
display: flex;
/* 让子元素之间有相同的间距，且左右边上两个子元素紧贴边框 */
justify-content: space-between;
/* 再设置list距离边框的距离 */
margin: 30px 23px 20px 27px;
}
.area-left .disc_content .item{
/* list的每个子元素都有固定的宽高 */
width: 118px;
height: 150px;
/* 在封面和歌曲名之间有淡黑色的阴影，这里在item里设置背景实现 */
background: url(../images/main_01.png) -260px 100px no-repeat;
}
.area-left .disc_content .item .album{
/* 设置相对定位是为了让图片右边的黑色光碟和播放按钮进行绝对定位 */
position: relative;
}
.area-left .disc_content .item .mask{
/* 黑色光碟部分 */
position: absolute;
/* 偏移量 */
left: 0;
/* 将其转换为行内块元素从而可以设置它的宽高 */
display: inline-block;
width: 118px;
height: 100px;
/* 用背景图来实现 */
background: url(../images/main_03.png) 0 -570px;
}
.area-left .disc_content .item .album:hover .play{
display: inline-block;
position: absolute;
/* 设置偏移量 */
right: 25px;
bottom: 9px;
width: 22px;
height: 22px;
background: url(../images/small_button.png) 0 -85px ;
}
/* 歌曲名 */
.area-left .disc_content .item .desc{
/* 将其转换为块级元素是为了让其独占一行 */
display: block;
/* 调整距离 */
margin-bottom: 1px;
padding-top: 2px;
font-size: 12px;
/* 统一设置行高是为了让所有的歌曲名看起来在同一水平线上 */
line-height: 19px;
}
.area-left .disc_content .item .author{
display: block;
/* 这里统一设置行高也是一样 */
line-height: 14px;
font-size: 12px;
color: #666;
}
/* 当鼠标放上歌曲名或作者时出现下划线 */
.area-left .disc_content .item .desc:hover,
.area-left .disc_content .item .author:hover{
text-decoration: underline;
}
/* 左右按钮 */
.area-left .disc_content .btn{
position: absolute;
/* 固定宽高 */
width: 17px;
height: 17px;
/* 偏移量 */
top: 71px;
}
.area-left .disc_content .left_btn{
/* 偏移量 */
left: 4px;
/* 用背景图实现 */
background: url(../images/main_01.png) -260px -75px;
}
/* 当鼠标放上去时按钮颜色变深 */
.area-left .disc_content .left_btn:hover{
background: url(../images/main_01.png) -280px -75px;
}
.area-left .disc_content .right_btn{
right: 5px;
background: url(../images/main_01.png) -300px -75px;
}
.area-left .disc_content .right_btn:hover{
background: url(../images/main_01.png) -320px -75px;
}
页面如下
排行榜（榜单）
<div class="rank">
<!-- 标题部分 -->
<div class="header_type_02">
<div class="header_left">
<a href="#" class="title">榜单</a>
</div>
<div class="header_right">
<a href="#" class="more">更多</a>
</div>
</div>
<!-- 具体内容部分——三个列表 -->
<div class="rank-content">
<dl>
<!-- 封面部分 -->
<dt class="top">
<!-- 封面的图片 -->
<div class="cover">
<img src="./images/rank_list_01.jpeg" alt="">
<a href="#"></a>
</div>
<!-- 封面的信息 -->
<div class="info">
<div class="name">
<!-- 标题 -->
<h3 class="title">飙升榜</h3>
<!-- 两个按钮 -->
<a href="#" class="btn play"></a>
<a href="#" class="btn collect"></a>
</div>
</div>
</dt>
<!-- 列表 -->
<dd class="list">
<ol>
<!-- 列表中的一项 -->
<li class="item">
<!-- 数字标号 -->
<span class="no">1</span>
<!-- 歌曲名 -->
<a href="#" class="song">想想就烦</a>
<!-- 三个按钮 -->
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">2</span>
<a href="#" class="song">Letting Go（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">3</span>
<a href="#" class="song">挚友</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">4</span>
<a href="#" class="song">带我走</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">5</span>
<a href="#" class="song">滥俗的歌</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">6</span>
<a href="#" class="song">普通人生</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">7</span>
<a href="#" class="song">驶过的声音是</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">8</span>
<a href="#" class="song">城外</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">9</span>
<a href="#" class="song">纯白的起点</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">10</span>
<a href="#" class="song">爱情歌</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
</ol>
</dd>
<!-- 最后一项的查看更对 -->
<div class="more">
<a href="#">查看全部></a>
</div>
</dl>
<dl>
<dt class="top">
<div class="cover">
<img src="./images/rank_list_02.jpeg" alt="">
<a href="#"></a>
</div>
<div class="info">
<div class="name">
<h3 class="title">新歌榜</h3>
<a href="#" class="btn play"></a>
<a href="#" class="btn collect"></a>
</div>
</div>
</dt>
<dd class="list up-list">
<ol>
<li class="item">
<span class="no">1</span>
<a href="#" class="song">风驶过的声音是</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">2</span>
<a href="#" class="song">Letting Go（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">3</span>
<a href="#" class="song">字字句句（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">4</span>
<a href="#" class="song">想想就烦</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">5</span>
<a href="#" class="song">普通人生</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">6</span>
<a href="#" class="song">就让这大雨全都落下（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">7</span>
<a href="#" class="song">电梯战神</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">8</span>
<a href="#" class="song">翠花</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">9</span>
<a href="#" class="song">Goast Face(鬼脸)（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">10</span>
<a href="#" class="song">天黑黑（Live版）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
</ol>
</dd>
<div class="more">
<a href="#">查看全部></a>
</div>
</dl>
<dl>
<dt class="top">
<div class="cover">
<img src="./images/rank_list_03.jpeg" alt="">
<a href="#"></a>
</div>
<div class="info">
<div class="name">
<h3 class="title">原创榜</h3>
<a href="#" class="btn play"></a>
<a href="#" class="btn collect"></a>
</div>
</div>
</dt>
<dd class="list up-list">
<ol>
<li class="item">
<span class="no">1</span>
<a href="#" class="song">缸</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">2</span>
<a href="#" class="song">亲爱的你一定要听见</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">3</span>
<a href="#" class="song">微观叙事</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">4</span>
<a href="#" class="song">美好的一切终会被定格</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">5</span>
<a href="#" class="song">水查（Go To HeyYo）</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">6</span>
<a href="#" class="song">电梯战神</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">7</span>
<a href="#" class="song">WAVE!</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">8</span>
<a href="#" class="song">城外</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">9</span>
<a href="#" class="song">茉莉</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
<li class="item">
<span class="no">10</span>
<a href="#" class="song">坏孩子</a>
<div class="operation">
<a href="#" class="btn play"></a>
<a href="#" class="btn add"></a>
<a href="#" class="btn collect"></a>
</div>
</li>
</ol>
</dd>
<div class="more">
<a href="#">查看全部></a>
</div>
</dl>
</div>
</div>
/* main */
/* 排行榜部分 */
.area-left .rank{
/* 使排行榜部分距离新碟上架部分有一定的距离 */
margin-top: 40px;
}
/* 排行榜内容部分 */
.area-left .rank .rank-content{
/* 使内容部分距离标题有一定的距离 */
margin-top: 20px;
/* 内容有固定的高度 */
height: 472px;
/* 内容的表格是用图片实现 */
background: url(../images/rank_bg.png);
}
.area-left .rank-content{
/* 内容一共有三个列表，用浮动布局使这三个列表在同一行排列 */
display: flex;
}
.area-left .rank-content dl{
/* 每个列表有固定的宽度 */
width: 230px;
}
/* 顶部封面部分 */
.area-left .rank-content .top{
/* 浮动布局，让图片和文字及图片在同一行排列 */
display: flex;
box-sizing: border-box;
/* 设置边距 */
padding-top: 20px;
padding-left: 20px;
}
.area-left .rank-content .top .cover{
position: relative;
}
/* 本来当鼠标放上封面的图片时不会显示小手，下面再在图片处嵌套一个a来实现此功能 */
.area-left .rank-content .top .cover img{
/* 图片有固定的宽高 */
width: 80px;
height: 80px;
}
/* 这个a是用一个透明背景来实现的，目的就是为了让鼠标放上图片时显示小手 */
.area-left .rank-content .top .cover a{
/* 绝对定位，定位到封面图片处 */
position: absolute;
/* 偏移量 */
left: 0;
/* 将其转换为行内块元素从而可以设置宽高 */
display: inline-block;
width: 80px;
height: 80px;
/* 透明背景 */
background: url(../images/main_03.png) -145px -57px;
}
/* info是封面的信息部分 */
/* 标题 */
.area-left .rank-content .top .info .title{
font-size: 14px;
cursor: pointer;
}
/* 当鼠标放上标题时标题文本出现下划线 */
.area-left .rank-content .top .info .title:hover{
text-decoration: underline;
}
/* 封面的两个图标的公共样式 */
.area-left .rank-content .top .info .btn{
display: inline-block;
width: 22px;
height: 22px;
}
/* 播放图标 */
.area-left .rank-content .top .info .play{
background: url(../images/main_01.png) -267px -205px;
}
/* 鼠标放上播放图片时图标颜色加深 */
.area-left .rank-content .top .info .play:hover{
background-position: -267px -235px;
}
/* 收藏图标 */
.area-left .rank-content .top .info .collect{
background: url(../images/main_01.png) -300px -205px;
}
/* 同上 */
.area-left .rank-content .top .info .collect:hover{
background-position: -300px -235px;
}
/* 下面都是调整信息部分的位置及边距 */
.area-left .rank-content .top .info{
padding: 8px 0 0 10px;
}
.area-left .rank-content .top .info .title{
margin-bottom: 10px;
}
.area-left .rank-content .top .info .btn{
margin-right: 5px;
}
/* 排行榜具体内容部分 */
/* 使列表的每一行内容出现在背景格子的正中间 */
.rank-content .list{
margin-top: 17px;
padding-left: 12px;
}
/* item是列表中的每一项 */
.rank-content .list .item{
/* 浮动布局，使每一项的内容在同一行排列 */
display: flex;
height: 32px;
/* 居中 */
line-height: 32px;
padding-right: 5px;
}
/* no是每一项的数字标号 */
.rank-content .list .item .no{
width: 35px;
/* 使该标号垂直居中 */
text-align: center;
font-size: 16px;
color: #666;
}
/* 选中前三项，将它们的数字标号该为红色 */
.rank-content .list .item:nth-child(-n+3) .no{
color: #c10d0c;
}
/* 每一项中的歌曲名字 */
.rank-content .list .item .song{
/* flex为1表示flex-grow为1 */
/* 它的作用是当我们把鼠标放上每个item时，显示三个小按钮，此时歌曲名字多余的内容隐藏并显示省略号 */
/* 当鼠标离开时，三个小按钮也就消失，此时歌曲名字就占据了全部内容 */
flex: 1;
font-size: 12px;
/* 不换行 */
white-space: nowrap;
/* 隐藏部分显示省略号 */
text-overflow: ellipsis;
/* 隐藏多余内容 */
overflow: hidden;
}
/* 当我们把鼠标放上歌曲名字时文本显示下划线 */
.rank-content .list .item .song:hover{
text-decoration: underline;
}
/* operation里包裹了三个按钮 */
.rank-content .list .item .operation{
/* 这里设置none是为了隐藏按钮，当鼠标放上每个item时再显示出来 */
display: none;
/* 居中 */
align-items: center;
/* 固定宽度 */
width: 82px;
}
/* 这部分就是上面说的当鼠标放上每个item时显示三个按钮 */
.rank-content .list .item:hover .operation{
display: flex;
}
/* 设置三个按钮的通用样式 */
.rank-content .list .item .operation .btn{
/* 每个按钮有固定的宽高 */
width: 17px;
height: 17px;
/* 使按钮之间有一定的距离 */
margin-right: 8px;
}
/* 按钮都是用背景图实现的 */
.rank-content .list .item .operation .btn.play{
background: url(../images/main_01.png) -267px -268px;
}
/* 鼠标放上每个按钮时按钮颜色变深，也是通过更换背景图实现的 */
.rank-content .list .item .operation .btn.play:hover{
background-position: -267px -288px;
}
.rank-content .list .item .operation .btn.add{
background: url(../images/main_04.png) 0 -698px;
}
.rank-content .list .item .operation .btn.add:hover{
background-position: -22px -698px;
}
.rank-content .list .item .operation .btn.collect{
background: url(../images/main_01.png) -297px -268px;
}
.rank-content .list .item .operation .btn.collect:hover{
background-position: -297px -288px;
}
/* 每个列表最下面的查看更多 */
.rank-content .more{
/* 使文本移动到靠右位置 */
padding-left: 140px;
}
.rank-content .more a{
/* 使文本垂直居中 */
line-height: 32px;
font-size: 12px;
}
/* 当鼠标放上去时文本显示下划线 */
.rank-content .more a:hover{
text-decoration: underline;
}
页面如下：
这里我在之前的css代码里又设置了一个下边框。
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
