雲麓谷高階作業

---

前言

---

雖然之前學了一點flex佈局，但是程式碼還是有很多不完善的地方，這次等於重做了一遍。

構建html骨架

這個是整體的佈局，可以把他看作人的身體，分別是頭部，腰部，腿部，腳步（比喻一下哈）然後開頭用div總括。

靈活運用css

理解盒子模型

通過菜鳥教程我們可以知道，盒子的主體部分包括Margin，Border，Padding，Content，可以把每個盒子當成一個獨立的單元，然後在調節邊距，寬度的時候要自己去嘗試，還蠻有意思的。

flex佈局

彈性佈局還是很巧妙的，但是按照菜鳥教程上面來的話其實感覺還是要靈活運用，首先要用display表示自己要用flex佈局了，之後就是定義方向，關於column和row我還是經常搞錯哈哈。

<font color=#999AAA>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 圓圈旁邊倆條線（難）
<font color=#999AAA >這裡用到了border-radius也就是圓形邊框，至於旁邊倆條線，我則是壓縮了盒子將它搞成線狀，並對邊框的寬度以及顏色進行了調整。