Web前端工程师之布局设计

学习背景

这段时间学完B/S了，同时也被停课了。师傅建议我学一些Web工程师的知识，一向听师傅话的我在听课期间开始学习Web工程师的内容，学了几天我发现自己特别喜欢Web设计和Web开发。

------------------------------------------------------------------------------------------------------

布局设计

理清概念：

固定宽度：就是某个div的width写死，如：20px;。在浏览器窗口大小变化时，div的大小不变。

自适应：根据百分比来让div自动调整宽度，如：20%。在浏览器窗口大小变化时，div的大小也相应变化。

一列布局设计

关键：左右的margin为auto

******************************************************************************************************

两列布局设计:

关键：先放一个Main的div然后在Main里面左右各分一个div，用float来控制两个div。

****************************************************************************************************

三列布局设计

关键：左右两个div用绝对定位固定好之后，Main的margin调整好，不跟左右两个div产生交叉。

******************************************************************************************************

混合布局设计：

关键：前三种布局方法的综合运用。

源代码下载

--------------------------------------------------------------------------------------------------

布局设计的核心

布局设计主要是用div来分割和表现的，div的关系表现为三种。

1、相邻

2、嵌套

3、层叠

--------------------------------------------------------------------------------------------------

思考总结

1、学习没有学不会的，只是需要再深入了解而已。

2、要善于站在巨人的肩膀上，老师、师傅都是帮助我们成长的贵人。

3、要善于总结，总结不是把书上说的内容复制一遍，而是更多地要运用和思考。