《华为音乐播放器项目》——2.静态页面实现

系统管理员 2022-02-13 11:15 288阅读 0赞

emmmmm，静态页面好像没什么需要特别记录的东西。  
最多就是新知道的几个CSS知识点和SVG的用法，但还是把具体实现步骤记录一下吧。

**最终效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]  
**一、对效果图先分区布局**

主要分为三个部分：

head:	包括歌名、作者
    panel：	旋转的效果，当前歌词和下一句歌词
    footer:	一些功能按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]  
**二、着手写整体布局的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 图片**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 2]  
具体的用法就是：

把保存好的 svg 文件中的最外面 `<g>` 标签改为 `<symbol>`，然后放到同一个 `<svg>`下  
文字不好描述出来，还是看别人的博客吧，搜关键字 “svg使用”，“svg文件引入”等即可看到。  
也可以在我的 [github 项目（https://github.com/70kg111/HUAWEI-MUSIC）][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 图片，就是做第一部分的功能按钮**  
![在这里插入图片描述][20190427220126700.png]  
这里跟上面引入 svg 文件的做法差别不大，注意的就是用**万精油居中代码**（再打一遍），然后注意左右和上下边距的距离

display: flex;	//弹性盒子
    align-items: center;	//垂直居中
    justify-content: center;	//水平居中

还要注意一下 svg 在 html 内引入的形式：

**五、进度条和两边的时间**

![在这里插入图片描述][20190427231412791.png]

1、先在 html 内写好时间和进度条的 `<span>`，然后用 order:1 放开始时间，order: 2 放进度条，order: 3 放结束时间  
2、中间的进度条给一个初识状态，蓝色，边框缩进，然后给一个进度条开始动的状态，用 flex 布局在同一行内  
3、那个中间的点也是放一个 svg 图片进去，看上去更形象一点

六、再次引入 svg 做最后的功能按钮

![在这里插入图片描述][20190427231756723.png]  
用到了 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`;

静态页面实现，完成！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70]: /images/20220213/39f0e9769a314a26b894d1ea34b56440.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 1]: /images/20220213/a8e05fc8c07146e9b1e90ec2e41e4002.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNzYwNA_size_16_color_FFFFFF_t_70 2]: /images/20220213/833ee1d7214a46cdabb11f07e85b5378.png
[github _https_github.com_70kg111_HUAWEI-MUSIC]: https://github.com/70kg111/HUAWEI-MUSIC
[20190427220126700.png]: /images/20220213/98fa4b7dc65e4f8d9d1d8e9be9b02963.png
[20190427231412791.png]: /images/20220213/2538aece3702469b94aaa873f047f275.png
[20190427231756723.png]: /images/20220213/d7cbb3b0eff34e3891d8d81b89ad3011.png