说好不哭的!——小demo学习切页面（二）

话不多说先上目标：

引言

我们之前实现了一个kiss的小demo让我们初体验了一下html和css的魅力，在我们之后的前端之旅上，我们更多的是使用页面加JavaScript控制的方式来实现许多不一样的效果。

那么我们的第一步就是先得做好页面，才能让我们的JavaScript大展身手，所以我们今天的目标就是在html上制作一个手机端的音乐播放的页面，这篇内容只包含切图不会JavaScript也可以大口入~

我们今天的切页面也是继续培养我们的切图逻辑，我们还是跟着这样的一个逻辑去走：首先一步步去把一个大的页面分割成小块，然后一步步对每一块进行设计，一步步对每一块添加样式，动画，就可以一步步完成我们的页面了~

第一步构思

我们拿到了这样的一张图我们首先还是透过骨相看皮相

我们大体其实可以先分为上下两个部分：

如果你仔细观察会发现我们下面一块圆角处理后露出了上面一块所以它们应该是重叠的

然后我们的上部分应该是这样的：

应该有一个`div``并且里面有左边和中间的内容

-然后下半部分分成五块

我们接下来对每一个小块再来分析一下

第一块只有一个图片我们就不用多写了，直接第二块：

我们这一块里也分为上下，一个歌曲名一个作者名

第三块：

这是一个进度条包括时间我们其实也是分成了上下，下面我们拆成两个小方块

第四块：

第四块就是五个操作按钮了，直接分成五块

第五块：

第五块就很简单了，就是左右两个小圆，等下我们直接用css来写

汇总一下我们的大体结构分析就完成了，完整的结构图具体如下：

那么我们第一步就结束了，让我们开始下一步~

第二步写框架

有了一个简单的结构之后，我们就可以先写一堆盒子把整体html的框架写出来：

我们先写一个大盒子music放上所有的东西

html 复制代码

<div class="music">
</div>

上下部分我们设计为music__head和music__body

html 复制代码

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

我们的music__head部分我们可以分别放一个背景盒子bg（避免虚化操作虚化div内所有内容，我们把背景分出来）和一个music__head-title盒子,在里面放上一个back盒子存放那个返回的箭头(我直接使用阿里巴巴图标库找到图标贴进去，如果需要可以评论区留言我写一篇文章教大家怎么用)，再放一个title盒子存放正在播放这个标题：

html 复制代码

<div class="music__head">
    <div class="bg"></div>
       <div class="music__head-title">
         <div class="back">
           <i class="iconfont icon-zuojiantou"></i>
         </div>
         <div class="title">正在播放</div>
       </div>
    </div>
</div>
<div class="music__body">
</div>

那么我们的head部分就结束了，接下来是body部分：

我们的body中有很多盒子，首先是放歌曲封面图片的body-pic盒子，然后是放歌曲名和作者名的body-desc盒子，然后是放进度条的body-line盒子，然后是放上操作的body-play盒子，最后是一个body-model盒子存放那两个模式小圆：

html 复制代码

<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>

然后我们一步步为他们添加各自的小盒子
body-pic

在这里面我们只有一张歌曲的封面图片

html 复制代码

<div class="body-pic">
    <img src="https://img.zcool.cn/community/018d7a5d832755a8012060be2da4d4.jpg@3000w_1l_0o_100sh.jpg" alt="">
</div>

body-desc

这里面我们只需要添加相应的文字p标签就可以了

html 复制代码

<div class="body-desc">
    <p class="name">说好不哭</p>
    <p class="author">周杰伦</p>
</div>

## 添加样式body-line

在这里面我们需要添加一个显示进度条的盒子，里面放一个小盒子以便利用js实现随着音乐播放而移动的红色进度条，这篇文章里我们没有设置，有兴趣会使用JavaScript的友友们可以自己尝试一下~ 然后就是两个行内span标签可以同行去到两边

html 复制代码

<div class="body-line">
    <div class="line">
       <div class="line-color"></div>
    </div>
    <span class="left">02:41</span>
    <span class="right">04:41</span>
</div>

body-play

在这里面我们有五个一样大小的div，里面的图标大小不同样子也不同，我们可以直接通过css去设置，图标还是取自阿里巴巴图标库,所以我们直接写五个li就可以了

html 复制代码

<div class="body-play">
    <ul>
       <li>
          <i class="iconfont icon-suiji"></i>
       </li>
       <li>
          <i class="iconfont icon-kuaitui"></i>
       </li>
       <li>
          <i class="iconfont icon-bofang"></i>
       </li>
       <li>
          <i class="iconfont icon-kuaijin"></i>
       </li>
       <li> 
          <i class="iconfont icon-aixin"></i>
       </li>
    </ul>
</div>

body-model

这里面的内容还是比较简单的，我们直接用两个小div就可以了

html 复制代码

<div class="body-model">
    <div class="hifi">
        HIFI
    </div>
    <div class="dts">
        DTS
    </div>
</div>

然后我们就完成了整个html框架的设计，我们在这里贴一份完整的代码~ ：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4315530_92zt2qu9rbg.css">
</head>
<body>
  <div class="music">
    <div class="music__head">
      <div class="bg"></div>
      <div class="music__head-title">
        <div class="back">
          <i class="iconfont icon-zuojiantou"></i>
        </div>
        <div class="title">正在播放</div>
      </div>
    </div>
    <div class="music__body">
      <div class="body-pic">
        <img src="https://img.zcool.cn/community/018d7a5d832755a8012060be2da4d4.jpg@3000w_1l_0o_100sh.jpg" alt="">
      </div>
      <div class="body-desc">
        <p class="name">说好不哭</p>
        <p class="author">周杰伦</p>

      </div>
      <div class="body-line">
        <div class="line">
          <div class="line-color"></div>
        </div>
        <span class="left">02:41</span>
        <span class="right">04:41</span>
      </div>
      <div class="body-play">
        <ul>
          <li>
            <i class="iconfont icon-suiji"></i>
          </li>
          <li>
            <i class="iconfont icon-kuaitui"></i>
          </li>
          <li>
            <i class="iconfont icon-bofang"></i>
          </li>
          <li>
            <i class="iconfont icon-kuaijin"></i>
          </li>
          <li> 
            <i class="iconfont icon-aixin"></i>
          </li>
        </ul>
      </div>
      <div class="body-model">
          <div class="hifi">
            HIFI
          </div>
          <div class="dts">
            DTS
          </div>
      </div>
    </div>
  </div>
</body>
</html>

那么之后就是一个个对照着写css样式了~

第三步添加样式

今天的样式有一个小技巧就是那五个小方块可以使用弹性盒子来进行均分空间：

css 复制代码

.body-play ul{
  display: flex;
}

.body-play ul li{
  flex: 1;
}

就这样就可以啦，剩下的内容就比较基础了，可以自己尝试也可以对照源码，这里是完整的css贴给大家~ ：

css 复制代码

*{
  margin: 0;
  padding: 0;
}

.music__head{
  position: relative;
  height: 303px;
  overflow: auto;
}
.music__head .bg{
  height: 100%;
  width: 100%;
  background-image: url(https://img.zcool.cn/community/018d7a5d832755a8012060be2da4d4.jpg@3000w_1l_0o_100sh.jpg);
  background-size: cover;
  filter: blur(10px);
  position: absolute;
  z-index: -1;
  /* display: inline-block; */
}

.music__head-title{
  /* position: absolute; */
  margin: 45px 0;
  color: #fff;
  padding: 0 40px;
}

.back{
  float: left;
}

.title{
  text-align: center;
  font-style: 12px;
}

.music__body{
  position: absolute;
  top: 130px;
  width: 100%;
  height: calc(100% - 130px);
  background-color: #fff;
  border-radius: 32px 32px 0 0;
}

.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 20px rgba(0,0,0,.2);

}

.body-pic img{
  height: 100%;
  border-radius: 32px 32px 0 0;
}


.body-desc{
  margin-top: 260px;
  margin-bottom: 20px;
  text-align: center;
}

.name{
font-size: 21px;
font-family: SourceHanSansCN;
font-weight: bold;
color: #000000;
line-height: 50px;
}

.author{
font-size: 15px;
font-family: SourceHanSansCN;
font-weight: bold;
color: #4F4F4F;

}

.body-line{
  width: 100%;
  height: 15px;
  /* border: 1px solid #000; */
}

.line{
  margin: 0 auto;
  width: 257px ;
  height: 2px;
  background: #c7c4c4;
}

.line-color{
  height: 100%;
  width: 120px;
  background: red;
}

.left{
  float: left;
  margin-left: 65px;
  font-size: 8px;
  font-family: SourceHanSansCN;
  font-weight: bold;
  color: #9EA0AD;
  line-height: 25px;
}

.right{
  float: right;
  margin-right: 65px;
  font-size: 8px;
  font-family: SourceHanSansCN;
  font-weight: bold;
  color: #9EA0AD;
  line-height: 25px;
}

/* .body-play{
  
} */

.body-play ul{
  width: 257px;
  height: 100%;
  display: flex;
  /* justify-content: center;*/
  /* align-items: center;   */
  list-style: none;
  margin: 0 auto;
}

.body-play ul li{
  flex: 1;
  text-align: center;
  line-height: 83px;
  color: #8370A8;
}

.body-play i{
   font-size: 30px;
}

.body-play .icon-bofang{
  font-size: 50px;
  color: #f50d0d;
  /* box-shadow: 0px 6px 19px 0px rgba(195,96,96,0.5); */
  border-radius: 50%;
}

.body-model{
  width: 257px;
  height: 41px;
  margin: 0 auto;
  text-align: center;
}

.body-model div{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #8370A8;
  text-align: center;
  font-size: 6px;
  line-height: 20px;
  color: #8370A8;
}

.hifi{
  float: left;
  margin-left: 20px;
}

.dts{
  float: right;
  margin-right: 20px;
}

总结

那么我们今天的小demo切图实战就到这里结束啦，之后我们会逐渐从htmlcss到开始使用js一路慢慢进阶带着大家从小demo做起，让我们一起学习吧~

点赞关注不迷路，敬请期待更新更多后续~

如果遇到任何问题可以直接在评论区留言，作者会及时回复大家~

说好不哭的!——小demo学习切页面（二）

引言

第一步 构思

第二步 写框架

第三步 添加样式

总结

第一步构思

第二步写框架

第三步添加样式