[笔记] 网页切版直播班 2020 春季班 – 第二周

章节连结

第二周的重点主要放在 Flex 的版型运用。从基础的配置开始,到如何分析一张设计图的架构,进而切出符合设计稿样式的结果,是这一周的重点。同时,为了加速开发和熟悉流程,运用 Emmet 和一些视觉化结果的网站,可以让新手更快上手。
hex-school-logo

第二周课程重点

基础知识

Flex 是有内外容器之分,其影响力只有一层。
决定轴线: flex-direction
主轴对齐:justify-content
换行:flex-wrap
交错轴对齐:align-item

经验谈

不只有 div 可以用

ul li 也是可以用的架构,可以避免掉多余的 div。

Flex 里面可以用 Flex

承接上面,你可以一层包一层

移除多余的语法

如果有多余的语法,反倒造成维护上的困难,也不晓得效果的产生是由哪一些程式码发动的

切版练习结果


相关文章


按赞加入粉丝团

延伸阅读