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

專注於前端課程的六角學院,近期開了一個切版直播班,手把手的透過直播帶領大家釐清觀念,同時練習各種各樣的版型,大家在日後切版的速度可以更加快且準確。

hex-school-logo


第一週課程重點

前置作業

加快寫 Code 速度

可以使用 keybr.com 來讓你的手指自然而然在打英文的時候,記住鍵盤的位置。

使用 Emmet 和 TabNine

Visual Studio 已經內建了 Emmet 功能,再加上 TabNine 可以讓你撰寫Code更加的快捷,不需要打過多的字母。

基礎知識

容器與共用的概念

將共用的 CSS、 HTML 架構給予抽出,可以降低你撰寫重複的程式碼。

區塊元素(block)與行內元素(inline)

前者會另起一行,可以設定寬高;後者的話不會滿版、並排且寬高無用(可以用  display: block )來處理。

box-sizing

要設置在 * 上,會包含 border

經驗談

配合人的手指大小,按鈕大小要在 44px

line-height

行高 ( h )相當於字母的上下間距,字體大小( s )會在這個間距中間。當要計算字母和下方的差距 ( mb ),其公式為:
( h – s ) / 2 +  mb

img 下方會天生留白 2 ~ 3 px

可以用 display:block || vertical-align:middle

切版練習結果


相關文章

按讚加入粉絲團

延伸閱讀