一.页面原型
二.代码描述
1.初始化+页面头部分
html：
<div class="container">
<div class="top">
<img src="images/angle-left-solid.png" />
<span class="top_words">Playlist</span>
<img src="images/ellipsis-h-solid.png" />
</div>
</div>
css:
初始化部分
* {
/* 取消内外边距 */
margin: 0;
padding: 0;
}
.container {
width: 414px;
box-sizing: border-box;
padding: 30px 30px 0 30px;
}
/* 由于box-sizing: border-box;不具有继承性，无法从父级继承 */
*,
*:before,
*:after {
box-sizing: inherit;
}
页面头部分：
.top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.top img {
width: 13px;
}
.top_words {
font-size: 18px;
font-weight: 700;
}
2.页面主体部分
html:
<div class="middle">
<div class="middle_l">
<img src="images/play-solid.png" />
<div class="middle_l__in">
<span>Whiteout</span>
<span>Blackout</span>
</div>
</div>
<div class="middle_r">
<span>26:54</span>
</div>
</div>
css:
.middle {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #EBEBEB;
padding: 32px 0;
}
.middle_l img {
width: 20px;
margin-right: 33px;
}
.middle_l {
display: flex;
align-items: center;
}
.middle_l__in {
display: flex;
flex-direction: column;
}
.middle_l__in span:first-child {
font-size: 16px;
font-weight: 600;
color: #373539;
}
.middle_l__in span:last-child {
font-size: 15px;
font-weight: 400;
color: #7B7A7C;
}
.middle_r span {
font-size: 15px;
color: #7B7A7C;
}
其它相似重复部分cv即可
3.最终显示
