---
# System prepended metadata

title: '**自主學習**'

---

# **自主學習**


![](https://i.imgur.com/yf7FVCK.jpg)

首先是html的部分
![](https://i.imgur.com/Dm8TznW.jpg)
![](https://i.imgur.com/6NTcIiS.jpg)
![](https://i.imgur.com/mubCOrX.jpg)
大致上分為3個區域:
第一個是上方白色的部分
最後是最下面灰色的部分
其餘的部分我是當作第二部分

再來說明一下，第一部分還要再拆成左右兩邊；第二部分拆成圖片、搜尋框

緊接著就是修改css即可
![](https://i.imgur.com/6USlzWc.jpg)
讓其垂直致中(因為我是綁死的->px)