課堂重點 – Flexbox 網頁排版術

把 " 使用 HTML、CSS 開發一個網站 " 課程中的筆記與此堂 flex 統整於此篇文章 ( 淺談 Flex ) 中。

訓練菜單

  • 第四項語意命名
  • Blog 做觀念重組。

細節注意

  • OOCSS「容器與內容分離」、「樣式與結構分離」、個別用到的使用 BEM 命名。
  • 主題式項目使用 ul >li 結構。
  • 圖片變區塊元素。
  • Flex 運用。
  • 不要亂加語法買保險。

設計稿流程規劃

開版

設計稿中區分為兩大區塊:滿版、1200px ( .container )

  • 此設計稿嘗試使用 OOCSS 與 BEM,滿版區塊這週以能複用的 class 取代 .container-fluid ,各別會用到的樣式則另外命名 ( 覺得 BEM 命名還是有點障礙,要多練習 XD )。
  • 『 About、Brand、Works、Contact 』區塊統一使用 padding 推出上下內距,裡面內容再使用 同方向的 margin-bottom 推擠調整。
  • 同主題式項目使用 ul > li
    • Brand 圖片、Works 圖片、Contact 的 Mail & Phone
    • Works 內的作品輯,在小組會議中對於要拆解成幾個 ul > li 結構有不同意見,後來助教長覺得都可以,只是此設計稿部分是有分類的 ( 一排一個類別 ),所以可拆成三個 ul > li 結構。
      感覺日後有機會參與專案,在正式撰寫前和設計師做事前溝通滿重要的,不然寫完後發現認知不同,要大翻修會很想去撞電腦 ( 太貴 ) 撞牆 XD

資料來源

六角學院 :

最後修改日期: 29 10 月, 2020

作者