[筆記] 網頁切版直播班 2020 春季班 – 第二週

章節連結

第二週的重點主要放在 Flex 的版型運用。從基礎的配置開始,到如何分析一張設計圖的架構,進而切出符合設計稿樣式的結果,是這一週的重點。同時,為了加速開發和熟悉流程,運用 Emmet 和一些視覺化結果的網站,可以讓新手更快上手。
hex-school-logo

第二週課程重點

基礎知識

Flex 是有內外容器之分,其影響力只有一層。
決定軸線: flex-direction
主軸對齊:justify-content
換行:flex-wrap
交錯軸對齊:align-item

經驗談

不只有 div 可以用

ul li 也是可以用的架構,可以避免掉多餘的 div。

Flex 裡面可以用 Flex

承接上面,你可以一層包一層

移除多餘的語法

如果有多餘的語法,反倒造成維護上的困難,也不曉得效果的產生是由哪一些程式碼發動的

切版練習結果


相關文章

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:27