likes
comments
collection
share

说好不哭~——手摆位教你构架音乐播放页面

作者站长头像
站长
· 阅读数 74

前言

学习前端，怎么能够不会切出自己喜欢的布局页面呢？貌似学习的你有点不合格了（哈哈）。今天手摆位第一视角切图，入职前的一个小KS啦

来看看模版：

说好不哭~——手摆位教你构架音乐播放页面

看看我的效果：

说好不哭~——手摆位教你构架音乐播放页面

正文

这张图片可以看出是上下布局，分出HTML和CSS部分来编写。

架构布局

拿到初稿的这张设计图，上下分布，大体分为上下两部分：

说好不哭~——手摆位教你构架音乐播放页面

在圆角露出的那一块，页面之间是覆盖的，这里的容器之间的重叠这样来看：

上半部分：

说好不哭~——手摆位教你构架音乐播放页面

这里 div 标签中的容器，存放了左边和中间两个内容。

下半部分：

说好不哭~——手摆位教你构架音乐播放页面

又分为这么些小块，对照初稿编写容器存储起来，根据下图一一对应：

说好不哭~——手摆位教你构架音乐播放页面

图片，曲名，进度条，播放键以及功能键的设置：

  • music-pic
  • music-desc
  • music-line
  • music-play
  • music-model

迭代出HTML代码：

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

在music这个大容器中存放音乐的头部和头部标题，分别在里面放入返回按钮和正在播放的字体。

<div class="music__body">
    <div class="body-pic">
    <img src="https://pics4.baidu.com/feed/2fdda3cc7cd98d10edf40d96c788cc0b7aec90b6.jpeg?token=a2f5d9ee2d37b3e6f809dec66d4fcdae&s=1B32F8A206060CF61454EC9103009040"
                    alt="">
    </div>

此处body部分放置好你的图片效果，一容器中相同的图片实现虚化效果。

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

在 desc 容器中放好歌名和作曲家。

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

这里line 部分控制好歌曲播放的进度条，以及显示开始和结束的时间比。

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

这里或许你会疑问按钮的箭头是从哪里来的？难道要靠自己手搓一个吗？那可能你就v要搓到猴年马月。给大家介绍一个网站: 阿里巴巴矢量图标库，从这里面获取。

简单介绍一下获取的方法：

在我们这个例子中，如上框出的图标都是在以上网站中获得，十分的方便。教你们如何获得想要的图片，比如我们想要获得左箭头，就直接搜索

说好不哭~——手摆位教你构架音乐播放页面

进入图标库去选择就可以了，选择自己想要的内容，复制好自己想要图标的代码，粘贴 到自己布局页面就可以使用了。

HTML差不多编写好大致的框架了，接下来要用CSS去添加样式。

CSS样式布局：

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

.body-play ul{
  display: flex;
}

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

之后依次对每一个边框进行布局构建：

这是身体部分，这是长宽高，以及颜色和容器的大小。

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

这是阴影部分的构架，在 pic 中让其相对于body定位，以及位置的居中等等...

.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);

}

CSS样式就是对HTML的重新构建，在每一个容器中根据布局样式来设计对应稿件的参数，依次填入即可，这里不需要我们求出对应大小的参数，不然我们可真是苦bi啊，就没有天理了...

说好不哭~——手摆位教你构架音乐播放页面

直接附上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;
}

每个参数自己对应的手码上去试试，这里就是今天要分享的页面内容了。

总结：

根据参数设计容器以及样式的编写，提高出对CSS的解读能力，后续将会谈到更加完整的精彩内容，先支持长安一波再走哦！😁👌😁👌

转载自:https://juejin.cn/post/7367192073097412642
评论
请登录