大学课程《Web前端开发与应用教程》PPT教学课件：项目五任务3 DIV+CSS布局.pptxVIP

项目5浮动与定位

掌握元素的浮动12掌握元素的定位3理解DIV+CSS布局?学习目标掌握理解掌握

任务三DIV+CSS布局

为什么要应用布局？

【结论】在制作网页时，要想使页面结构清晰、有条理，也需要对网页进行“排版”。阅读报纸时会发现，虽然报纸中的内容很多，但是经过合理地排版，版面依然清晰、易读。例如：

【结论】“版心”是指网页中主体内容所在的区域，一般在浏览器窗口中水平居中显示。3.1版心和布局流程

3.1版心和布局流程为了提高网页制作的效率，布局时通常需要遵守一定的布局流程。布局流程确定页面的版心。1分析页面中的行模块，以及每个行模块中的列模块。2运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。3

3.1版心和布局流程

初学者在学习制作网页时一定要注意页面布局的习惯，可以极大地提高制作效率。

3.2单列布局“单列布局”是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如图展示的就是一个“单列布局”页面的结构示意图。

3.3两列布局“两列布局”和“一列布局”类似，只是网页内容被分为了左右两部分，打破了统一布局的呆板，让页面看起来更加活跃。

3.4三列布局对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用“三列布局”的页面布局方式。其实，这种布局方式是在两列布局的演变，只是将主体内容分