Skip to content

RexHung0302/Hexschool-Flex-Practice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hexschool-Flex-Practice

這是一份六角學院的 Flex 練習,內容包含下列十個項目:

  1. 並排卡片

  2. 雙欄排版

  3. 雙欄選單設計

  4. 表頭表尾設計

  5. 常見三種排版

  6. 圖文並排

  7. 首頁橫幅排版

  8. 圖文並排設計

  9. 訂單明細

  10. 產品列表

此一份練習題目也有試著引入 SMACSSOOCSS 模組化CSS ,如果不清楚的可以查看這篇文章[CSS Notes] - CSS模組化

後更 4/5: 修正一個網頁有多個 h1 的問題,另外 CSS 命名過長,比如 .container .box.boxLeft .box__content .downPart .menu .li,這樣將會造成瀏覽器渲染過久,改為 .menu .li,另外將 Class Name 階層也盡量縮短,然後將它模組化,譬如 .container .upPart, 標籤的地方都另外加上 <a></a>


使用方法

1. $ git clone https://github.com/RexHung0302/Hexschool-Flex-Practice.git

2. $ cd Hexschool-Flex-Practice

3. 打開 Example 自行照著題目練習切版 或 點擊各資料夾參考

4. Enjoy it!

相關介紹文章

[CSS Notes] - CSS模組化

[CSS Notes] - 第一次 Flex 就上手

Releases

No releases published

Packages

No packages published