[笔记] 网页切版直播班 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

切版练习结果


相关文章

按赞加入粉丝团

延伸阅读