CSS双列布局实战.docVIP

AAA学院 软件开发专业 PAGE PAGE 2 Web前端开发实训案例一 双列布局 要求 在页面上创建一个居中并且带有外部边框的双列布局，左侧宽度200px,右侧宽度780px， 请认分析题目要求完成实例。 案例背景 双列布局在网页制作中很常见，更进一步的应用有双列等高布局、双列全屏布局等。运用浮动实现双列布局，双列之间的间距完全可控，能更精确的达到项目的要求。本例的实训重点在于加强浮动知识点进一步的理解与应用。 预备知识 html元素盒模型的理解 浮动与清浮动的基本概念 实现过程 结构分析 通过题目要求可以得到简单的html结构如下 布局思路分析 （1）居中效果 设置过元素宽度的前提下，用 margin:0 auto 的属性实现。此处宽度检验盒模型知识点的理解，内容共为980px的宽度，而最外层元素的宽度不能小于980，否则浮动也不能实现双列布局效果。若用display:inline-block实现的话，宽度980px还不够，因为内部的两个div换行被解析后之间会有间隙。故而得到下面的样式 （2）实际应用中因为外层元素加高度不利于扩展，实例中以内容的高度400px撑开父级高度，而浮动元素因为层级被提升的关系，造成最外层元素未能包住子元素，边框出现异样。 此图还可看出元素最终宽度为982px,因为实际宽度还必须加上左右边框。 （3）主流清浮动方法解决问题 给浮动元素的父级加上类名 clear，然后进行样式设置。 zoom:1的作用是触发元素在IE6环境下的haslayout属性，从而解决清浮动失效的问题。 （4）扩展 在上面的基础上实现左侧宽度固定为200px,右侧宽度自适应的双列全屏布局。实现思路提示：宽度自适应的模块不能设设置浮动，否则尺寸变成内容撑开所以达不到要求。可以让指定宽度的元素浮动，然后通过外边距来控制宽度自适应模块的位置。 项目实训案例评分标准 按要求完成实训效果 举出至少另外三种清浮动的方法 独立完成扩展内容之一 举例说明双列布局在流行页面中的应用