当个快乐的切图仔

前言

掘友们好呀！本文是我作为一个小白，从零到实现这个项目的全过程，从HTML框架到CSS样式设计，我都一步步记录下了我的想法与思考，如果你跟我一样是小白，可以一起学习，一起进步喔；如果你是大佬，那么也请不要划走，如果在下面代码中有什么错误话，还望大佬指导，我一定虚心学习。如果你喜欢我的文章的话，可以给个小爱心吗？谢谢啦！！话不多说，下面是我们要设计的页面，一个音乐播放器页面，那我们开始吧。

HTML框架设计

一个好的项目一定有一个好的框架，于是我观察设计稿，发现这个页面元素是上下排布的，所以我定义一个music容器来装这个音乐播放器，然后用head跟body将容器分为上下两个部分。

<body>
    <div class="music">
        <div class="music__head"></div>
        <div class="music__body"></div>
    </div>
</body>

大体的框架已经定好了，然后我发现，head里面有一个虚化的背景图，一个返回键“<”和一个“正在播放”的状态，返回键和“正在播放”在同一行显示，于是我给它们放进一个类名为head-title的div元素中，最后我将背景和head-title放在head里，代码如下：

<div class="music__head">
    <div class="bg"></div>
    <div class="music__head-title">
        <div class="back"> < </div>
        <div class="title">正在播放</div>
    </div>
</div>

趁热打铁，现在我们到body里来看，首先是一张正方形的图片，下面有歌名跟作者，接着是音乐进度条以及两个时间，然后就是一系列按钮，最后一行也是两个按钮。所以命名如下：

<div class="music__body">
    <div class="body-pic"></div>
    <div class="body-desc"></div>
    <div class="body-line"></div>
    <div class="body-play"></div>
    <div class="body-model"></div>
</div>

框架已经基本完成了，下面我们针对各元素进行样式设计。

首先我们重置浏览器样式，以确保每个浏览器都能看到一样的效果：

*{
    margin: 0;
    padding: 0;
}

在对head进行样式设计时，我发现返回键用“<”表示不太美观，于是我到iconfont-阿里巴巴矢量图标库里导入了类似的图标。（不会导入的友友可以移步到我的下一个作品）

head部分样式如下：

.music__head{
    position: relative;
    height: 303px;
    overflow: auto;/*滑动自适应*/
}
.music__head .bg{
    width: 100%;
    height: 303px;
    background-image: url(https://images.uiiiuiii.com/wp-content/uploads/2019/09/itz-font20190929-12-47.jpg
    );
    background-size: cover;/*图片铺满窗口*/
    filter: blur(8px);/*虚化图片*/
    position: absolute;
    z-index: -1;/*将背景向下移一个层级*/
}
.music__head-title{
    margin: 45px 0;
    color: rgb(255, 255, 255);
    padding: 0 40px;
}
.back{
    float: left;/*脱离文档流*/
}
.title{
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-family: SourceHanSansCN;/*字体*/
}

下面对body部分进行样式设计，在body-pic里面，我们直接用img标签导入一张在线图片；
在body-desc里面用两个p标签装歌名跟作者，并分别添加样式；
在body-line里面又可以细分成进度条与时间，进度条可以分为左边红色部分及右边黑色部分，时间可以分为左边与右边；
body-play里面插入了五个图标，与head部分的返回键用法相同；
最后body-model里面又分为左和右，同样在iconfont图标库内导入。

body代码如下：

<div class="music__body">
    <div class="body-pic">
        <img src="/">
    </div>
    <div class="body-desc">
        <p class="name">说好不哭</p>
        <p class="author">周杰伦</p>
    </div>
    <div class="body-line">
        <div class="bord">
            <div class="bord-left"></div>
            <div class="bord-right"></div>
        </div>
        <div class="time">
            <span class="time-left">02:41</span>
            <span class="time-right">04:41</span>
        </div>
    </div>
    <div class="body-play">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="body-model">
        <div class="model-left"><i></i></div>
        <div class="model-right"><i></i></div>
    </div>
</div>

目前，html框架已经全部构建完成，下面进行body部分的样式表设计：

.music__body{
    width: 100%;
    height: calc(100vh - 130px);/*计算全屏-head部分高度 减号两边加空格*/
    position: absolute;
    top: 130px;
    background-color: #fff;
    border-top-right-radius: 32px;/*右上角圆滑*/
    border-top-left-radius: 32px;/*左上角圆滑*/
}
.body-pic{
    width: 257px;
    height: 283px;
    overflow: hidden;/*超出即隐藏*/
    display: flex;
    justify-content: center;
    align-items: center;/*弹性布局让子容器完全居中*/
    border-radius: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);/*使图片居中*/
    top:-39px;
    box-shadow: 0 0 10px #efefef;/*图片阴影*/
}
.body-pic img{
    height: 100%;
}
.body-desc{
    margin-top: 260px;
    text-align: center;/*文字居中*/
}
.name{
    font-size: 22px;
    font-weight: bold;
    font-family: SourceHanSansCN;
    line-height: 50px;
}
.author{
    font-family: SourceHanSansCN;
    font-weight: bold;
    font-size: 15px;
}
.body-line{
    margin: 0 auto;/块级元素居中/
    margin-top: 30px;
    width: 245px;
}
.bord-left{
    width: 100px;
    border: 2px solid #F03030;
}
.bord-right{
    width: 245px;
    border: 1px solid #C6C6C6;
}
.time{
    margin-top: 8px;
    font-size: 8px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #9EA0AD;
    display: flex;
    justify-content:space-between;
    align-items: center;/*弹性布局让子容器完全居中*/
}
.body-play{
    height: 80px;
    width: 280px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}
.body-model{
    margin: 0 auto;
    width: 230px;
    margin-top: 5px;
    display: flex;
    justify-content:space-between;
    align-items: center;/*弹性布局让子容器完全居中*/
}

至此，我们的页面已经设计完毕，我会把完整代码贴在文末，对于设计中的疑难，我都在代码中标出，如果有疑问或者需要改进的地方，欢迎大家在评论区留言。

小白入门切图实战——音乐播放器

当个快乐的切图仔

前言

HTML框架设计

相关参考