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

2024-08-03 48

版权

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

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

前言

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

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

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

架构规划

首先，我们先来写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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言

架构规划

CSS

热门文章

最新文章

相关课程

相关电子书

相关实验场景