前端实战项目：网易云静态页面——主页面左侧部分
文章目录
- 前言
- 热门推荐
-
- header的封装
- 热门推荐内容
- 新碟上架
- 排行榜（榜单）
前言
网易云静态页面——导航栏
网易云静态页面——轮播图
网易云静态页面——主页面右侧部分
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">
<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">25366div>
<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 class="disc_area">
<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 IIa>
<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+PEACEa>
<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 Sheerana>
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 WISHa>
<a href="#" class="author">BTOBa>
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">1span>
<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">2span>
<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">3span>
<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">4span>
<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">5span>
<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">6span>
<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">7span>
<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">8span>
<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">9span>
<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">10span>
<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">1span>
<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">2span>
<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">3span>
<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">4span>
<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">5span>
<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">6span>
<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">7span>
<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">8span>
<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">9span>
<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">10span>
<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">1span>
<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">2span>
<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">3span>
<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">4span>
<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">5span>
<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">6span>
<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">7span>
<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">8span>
<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">9span>
<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>