布局拆分--饭叔的前端零基础入门教程 (2)

布局拆分--饭叔的前端零基础入门教程 (2)

打开豆瓣的主页(http://www.douban.com)

在你的眼里，它是这样的

douban_homepage.png

在前端设计师的眼里，它是这样的

douban_homepage_layout_01.png

逐步分解过程

douban_homepage_layout_all.png

组合效果

douban_homepage_layout_all_in_one.png

对于分解到最后的每个小块，通过设置背景，边距，字号等进行修饰，对鼠标键盘事件加上处理。就构成了完整的前端应用。（事件处理在以后的课程中讲解。）

分解的子块如何相对父块定位？

http://zh.learnlayout.com/position.html

块的边距与大小设置（盒模型）

http://w3school.com.cn/css/css_boxmodel.asp

字体字号设置

http://w3school.com.cn/css/css_font.asp

前景图片设置

http://w3school.com.cn/html/html_images.asp

背景设置

http://w3school.com.cn/css/css_background.asp

关于Z-index

大多数时候我们把屏幕看作一个平面，主要做平面上的分解。有时候也会把视图分作多个层。层的高度由z-index值决定。高层的元素会覆盖低层的元素。

layers.png

多层的应用举例：弹出框

https://ant.design/components/modal-cn/