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`;
靜態頁面實現，完成！