实战！小白切图，手把手教你完成音乐播放器页面

2024-08-03 35

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 实战！小白切图，手把手教你完成音乐播放器页面

前言

今天我们就来手把手教你如何用代码实现音乐播放器页面。如果我们想要找到一个好工作的话，只会切图是不够的，但是不能不会切图，切图虽然基础，但是是一定要学会的。

首先，我们先来看看今天的任务图

先来给大家看看我们实现的效果吧：

架构规划

首先，我们先来写html部分，我们需要先确定任务图的结构，如果大家看了我以前的文章的话，一定会想到用BEM命名法。

想要具体了解BEM命名的小伙伴们可以看我以前的文章点击这里BEM命名规范

我们将整张页面看成music,然后我们观察一下，发现可以将整张页面分为上下两部分，music__head,music__body

接下来我们对music__head进行划分，将箭头和正在播放分为music__head-title，背景图片为bg,因��此时图片只有一张，尽管我们不用BEM规范，也不会出问题

接下来我们来划分music__body,我们观察一下，可以将body分为五个部分

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

大的框架我们已经分完了，然后框内的小元素大家自行添加进去就行了

这里附上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_4310349_zr9mgjtohx.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://i0.hdslb.com/bfs/archive/c5e0392db23dada41b8ff5e052881abd7bb59d60.jpg">
                </div>
                <div class="body-desc">
                    <p class="name">说好不哭</p>
                    <p class="author">周杰伦</p>
                </div>
                <div class="body-line">
                    <div class="line-left"></div>
                    <div class="line-right"></div>
                    <div class="op-left">02:41</div>
                    <div class="ed-right">04:41</div>
                </div>
                <div class="body-play">
                    <div class="suijibofang">
                        <i class="iconfont icon-suijibofang"></i>
                    </div>
                    <div class="shangyiqu">
                        <i class="iconfont icon-shangyigeshangyiqu"></i>
                    </div>
                    <div class="bofang">
                        <i class="iconfont icon-bofang1"></i>
                    </div>
                    <div class="xiayiqu">
                        <i class="iconfont icon-xiayigexiayiqu"></i>
                    </div>
                    <div class="xihuan">
                        <i class="iconfont icon-xihuan1"></i>
                    </div>
                </div>
                <div class="body-model">
                    <div class="hq">
                        <i class="iconfont icon-yinzhi-sq"></i>
                    </div>
                    <div class="sq">
                        <i class="iconfont icon-yinzhi-hq"></i>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

这里给大家推荐一个网站，这个网站上有各种各样的小图标，当我们做页面时，很多小图标都可以从上面获取[：iconfont-阿里巴巴矢量图标库]

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

选择我们想要的箭头，加入购物车

点击添加至项目

如果你没项目的话，点击加入项目旁的+号，添加项目

选择Font class ，点击复制代码

接下来，我们在html的head中加入css样式，如下

<!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_4310349_zr9mgjtohx.css">
    //href 后输入刚刚复制的代码
</head>

然后我们在music__head中将此类名写进去，如下

这样箭头就可以显示出来了

接下来我们来看看CSS怎么写

CSS

首先，先附上代码

/* 通用样式，清除所有元素的默认外边距和内边距 */
* {
    margin: 0;
    padding: 0;
}
/* 页面头部样式 */
.music__head {
    position: relative;
    height: 303px;
    overflow: auto; /* 设置为BFC容器，清除浮动 */
}
/* 页面头部背景样式 */
.music__head .bg {
    width: 100%;
    height: 100%;
    background: url(https://i0.hdslb.com/bfs/archive/c5e0392db23dada41b8ff5e052881abd7bb59d60.jpg);
    background-size: 100% 100%;
    filter: blur(7px); /* 设置背景虚化 */
    position: absolute;
    z-index: -1; /* 将虚化背景放到最下面 */
}
/* 页面标题样式 */
.music__head--title {
    margin: 45px 0;
    color: rgb(1, 0, 0);
    padding: 0 40px;
}
/* 返回按钮样式 */
.back {
    float: left;
    width: 17px;
    height: 31px;
}
/* 标题样式 */
.title {
    text-align: center;
    font-size: 12px;
}
/* 主体部分样式 */
.music__body {
    width: 100%;
    /* calc用于计算函数，设置高度为用户屏幕高度减去130px */
    height: calc(100vh - 130px);
    background-color: aliceblue;
    position: absolute;
    top: 130px;
    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 20px #fff;
}
/* 图片样式 */
.body-pic img {
    height: 100%;
}
/* 描述文本样式 */
.body-desc {
    margin-top: 280px;
    text-align: center;
}
/* 名称文本样式 */
.body-desc .name {
    font-size: 21px;
    margin-bottom: 2px;
}
/* 右侧分隔线样式 */
.line-right {
    position: absolute;
    width: 277px;
    height: 0;
    border: 2px solid #C6C6C6;
    margin-top: 44px;
    margin-left: 50px;
}
/* 左侧分隔线样式 */
.line-left {
    position: absolute;
    height: 0;
    margin-left: 50px;
    margin-top: 43px;
    width: 118px;
    border: 3px solid red;
    z-index: 1;
}
/* 左侧操作样式 */
.op-left {
    position: absolute;
    width: 20px;
    height: 6px;
    font-size: 8px;
    font-weight: bold;
    font-family: SourceHanSansCN;
    color: #9EA0AD;
    line-height: 26px;
    margin-top: 45px;
    margin-left: 50px;
}
/* 右侧编辑样式 */
.ed-right {
    position: absolute;
    width: 20px;
    height: 6px;
    font-size: 8px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #9EA0AD;
    line-height: 26px;
    margin-top: 45px;
    margin-left: 315px;
}

/* 通用样式，清除所有元素的默认外边距和内边距 */
* {
    margin: 0;
    padding: 0;
}

这个规则适用于所有HTML元素，将它们的外边距和内边距设置为零，以清除页面中可能存在的默认间距。

/* 页面头部样式 */
.music__head {
    position: relative;
    height: 303px;
    overflow: auto; /* 设置为BFC容器，清除浮动 */
}

这个规则定义了页面头部的样式。music__head类的元素被定位为相对定位，高度设置为303像素，并启用了垂直溢出自动滚动。此处还提到了BFC（块格式化上下文）容器，以清除浮动。

/* 页面头部背景样式 */
.music__head .bg {
    width: 100%;
    height: 100%;
    background: url(https://i0.hdslb.com/bfs/archive/c5e0392db23dada41b8ff5e052881abd7bb59d60.jpg);
    background-size: 100% 100%;
    filter: blur(7px); /* 设置背景虚化 */
    position: absolute;
    z-index: -1; /* 将虚化背景放到最下面 */
}

这个规则定义了页面头部背景的样式。.bg是music__head元素内部的子元素。它设置了背景图片、大小、模糊效果以及它的位置。虚化背景被放置在堆叠顺序的底部（z-index：-1）。

/* 页面标题样式 */
.music__head--title {
    margin: 45px 0;
    color: rgb(1, 0, 0);
    padding: 0 40px;
}

这个规则定义了页面标题的样式，它具有music__head--title类。标题具有45像素的上外边距，文本颜色设置为红色，左右内边距为40像素。

/* 返回按钮样式 */
.back {
    float: left;
    width: 17px;
    height: 31px;
}

这个规则定义了返回按钮的样式，它浮动到左侧，具有17像素的宽度和31像素的高度。

/* 标题样式 */
.title {
    text-align: center;
    font-size: 12px;
}

这个规则定义了标题的样式，将文本居中对齐，字体大小设置为12像素。

/* 主体部分样式 */
.music__body {
    width: 100%;
    height: calc(100vh - 130px);
    background-color: aliceblue;
    position: absolute;
    top: 130px;
    border-top-right-radius: 32px;
    border-top-left-radius: 32px;
}

这个规则定义了主体部分的样式，包括宽度、高度（使用calc计算），背景颜色、位置和上部的圆角边框。

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧

实战！小白切图，手把手教你完成音乐播放器页面

前言

架构规划

CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景