《华为音乐播放器项目》——2.静态页面实现
emmmmm，静态页面好像没什么需要特别记录的东西。
最多就是新知道的几个CSS知识点和SVG的用法，但还是把具体实现步骤记录一下吧。
最终效果如下：
一、对效果图先分区布局
主要分为三个部分：
head: 包括歌名、作者
panel： 旋转的效果，当前歌词和下一句歌词
footer: 一些功能按钮
二、着手写整体布局的CSS：
1、先确定主题颜色，直接微信截图看的，这时候 svg 的好处就体验出来了。
先记录号主要的颜色，后面直接用就可以了，同时有一个新的用法，看下面的例子
$color: blue;
$color-dark: darken($color1,10%); //这个意思是color1的颜色暗 10% 成为一个新的颜色
h1{
color: $color; //蓝色
}
h2{
color: $color-dark; //深一点的蓝色
}
然后写CSS之前记得清空页边距
*{
margin: 0;
padding: 0;
}
移动端背景色全屏：
html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
css:
height: 100vh;
然后重新复习了一下 display:block，inline，inline-block 的概念及用法，对这三个的认识清晰了很多
display: block; //将元素变为块级元素，自成一行，能设置宽高，内外边距
display: inline; //将元素变为行内元素，两个行内元素会自动排在同一行，无法设置宽高、内外边距，父元素的高度是多少就是多少
display: inlie-block; //将元素变为块及元素，用法相当于把上面两个结合起来用，能排在同一行显示，但是又能设置宽高、内外边距
常见的块级元素：
div，p，h1~h6，ul，ol，li，address，table，menu，section，header，footer
常见的行内元素：
span，img，a，label，input，button
------------------------------------万金油居中代码------------------------------------------：
display: flex; //弹性盒子
align-items: center; //垂直居中
justify-content: center; //水平居中
三、中间内容里滚动的圆环其实是3个 svg 图片
具体的用法就是：
把保存好的 svg 文件中的最外面 <g> 标签改为 <symbol>，然后放到同一个 <svg>下
文字不好描述出来，还是看别人的博客吧，搜关键字 “svg使用”，“svg文件引入”等即可看到。
也可以在我的 github 项目（https://github.com/70kg111/HUAWEI-MUSIC）上直接下载这些图片，在 src/svg 文件夹下
三张 svg 图片放好了之后再做一个旋转动画
@keyframes rotate{
0%{
transform: rotate(0); //初始状态 0 度
}
100%{
transform: rotate(360deg); //结束状态旋转 360 度
}
}
引入到 svg 图片内：
animation: rotate 10s liner infinite reverse;
rotate: 用 rotate 的旋转动画
10s: 整个旋转过程需要 10 秒
liner: 线性旋转
infinite: 一直旋转下去
reverse: 反着转，如果不写就是往另一个方向转
四、继续引入 svg 图片，就是做第一部分的功能按钮
这里跟上面引入 svg 文件的做法差别不大，注意的就是用万精油居中代码（再打一遍），然后注意左右和上下边距的距离
display: flex; //弹性盒子
align-items: center; //垂直居中
justify-content: center; //水平居中
还要注意一下 svg 在 html 内引入的形式：
<svg class="btn-like"><use xlink:href="#icon-like"/></svg>
五、进度条和两边的时间
1、先在 html 内写好时间和进度条的 <span>，然后用 order:1 放开始时间，order: 2 放进度条，order: 3 放结束时间
2、中间的进度条给一个初识状态，蓝色，边框缩进，然后给一个进度条开始动的状态，用 flex 布局在同一行内
3、那个中间的点也是放一个 svg 图片进去，看上去更形象一点
六、再次引入 svg 做最后的功能按钮
用到了 svgSprite ，具体要看视频上面的操作，大致上与前面的引用还是差不多的，只是整合到一起了
知识点：
1、不同手机的屏幕适配方案，因为只有中间的内容的高度是需要改变的，head 和 footer 的高度不变，搜易
给 head 一个高度 x
给 footer 一个高度 y
中间内容的高度 = calc( 100vh - x - y )； //中间要有空格
2、 svgSprite 引入
将 svg 文件全都整合到 icons.js 文件下
然后再 index.js 文件内直接引入 icons.js 即可
index.js
import `icons.js`;
静态页面实现，完成！