範例版面

在接下來的幾天主要練習下方圖片的切版，規劃了較為簡單的基礎版面，在開始執行切板之前可以先稍微規劃一下要使用的class name以及切版方式，可以協助自己在切版的同時比較不會寫到很混亂，命名也會稍微有一致性，我主要分為以下七個區塊來介紹及練習：

1.導覽列(header_content)
2.主BANNER(section_kv)
3.圖文版面1(section_melon)
4.圖文版面2(section_gym)
5.大卡片(section_part2)
6.小卡片(section_card)
7.頁尾(footer_content)

在這邊也推薦3個google的擴充軟體，可以在剛練習的時候輔助自己!

1.Pesticide for Chrome (without hover bar)

網址：https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi

這個是可以讓你看到格線，方便切版的時候知道自己有沒有哪裡歪掉或是哪裡有重疊等等。

2.CSSViewer

網址：https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

這個是在剛練習的時候，有時候看到不錯的範例，但不確定怎麼寫的時候可以快速查閱style。

3. ColorPick Eyedropper

網址：https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

方便的網站顏色吸取工具，隨著滑鼠的移動十字中心點去查看物件的顏色，可以直接複製色碼。