第4章 DIV+CSS页面布局
《第4章 DIV+CSS页面布局》由会员分享，可在线阅读，更多相关《第4章 DIV+CSS页面布局（86页珍藏版）》请在文档大全上搜索。
1、第4章 页面布局 内内 容容 提提 要要4.4 实用技巧和代码规范 4.3 页面布局 4.2 盒子之间的关系4.1 概述 4.5 CSS hackv实现网页的页面布局一般有三种方法： 表格布局 框架布局 DIV+CSS页面布局。4.1 4.1 概述概述v表格布局的实现方式比较简单。v各个元素可以位于独立的单元格中，相互影响较小，而且对于浏览器的兼容性较好。v表格布局也存在一些缺陷。 首先，在某些浏览器下（例如IE），表格只有在全部下载完成后才可以显示。数据量比较大时会影响网页的浏览速度。 其次，搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。 另外，在多重表格嵌套的情况下，代码可读
2、性较差，页面下载的速度也会受到影响。v目前，除了规模较小的网站之外，一般不采用表格布局。v框架布局指的是利用框架来对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。v使用框架进行布局，可以使网页更整洁、清晰，网页下载的速度较快。v但是如果框架使用较多，也会影响网页的浏览速度。对于内容较多，较复杂的网站最好不要采用框架布局。另外，框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限，一般也只应用于较小规模的网站。对于规模较大的、比较复杂的网站大多数采用DIV+CSS方式来进行布局。DIV+CSS布局方式具有较为明显的优势，主要表现在以下几点。v1内容和表现相分离。
3、v2对搜索引擎的支持更加友好。v3文件代码更加精简，执行速度更快。v4易于维护。但是DIV+CSS页面布局也存在一定的缺陷：v1DIV+CSS方式实现起来比较复杂，初学者不易掌握。v2DIV+CSS方式对于元素的控制太灵活，容易出错。v3DIV+CSS方式还没有解决浏览器的完全兼容。例如在IE浏览器上可以正常显示的页面，换作其它浏览器显示可能会面目全非。v4使用DIV+CSS布局网页的开发成本较高，开发周期较长。4.2 4.2 盒子之间的关系盒子之间的关系vCSS规范的思路是，首先确定一种标准的排版模式，以保证设置的简单化，各种网页元素构成的盒子按照这种标准的方式排列布局。-标准流4.2 4.
4、2 盒子之间的关系盒子之间的关系v标准文档流简称标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。v1、块级元素（block level）:总是以一个块的形式表现出来，且跟同级的兄弟块依次竖直排列，左右撑满。v2、行内元素（inline）：各元素横向排列，到最右端自动折行。v例：行内元素.html与块级元素.html标记与标记与标记标记v（division）标记简单而言是一个区块容器标记，即与之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把与中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对进行相应的
5、控制，其中的各标记元素都会随之改变。v例：div.html标记与标记与标记标记v标记与标记一样，作为容器标记被广泛使用。与标记的区别在于， 标记是一个块级元素，它包围的元素会自动换行。而标记仅仅是一个行内元素，在它的前后不会换行。v此外， 标记可以包含在标记中，成为它的子元素，而反过来则不成立，即标记不可以包含标记。4.3 4.3 页面布局页面布局v一般的网页需要包括标志、站点名称、主页面内容、站点导航、子菜单、搜索区、功能区以及页脚等部分。每一部分可以使用一个div表示。各个div组成了整个网页的结构。每一个div都可以使用CSS的定位属性使其显示在页面的合适位置。4.3.1 4.3.1 默
6、认布局默认布局vdiv的默认布局为垂直排列。每个div在默认情况下是块级元素，div前后会出现换行。layout1.html:DIV的默认布局的默认布局-垂直排列垂直排列 #lay1 width:200px; height:30px; background-color:#90EE90; #lay2 width:200px; height:30px; background-color:#FFFACD; #lay3 width:200px; height:30px; background-color:#F08080; 4.3.2 4.3.2 水平排列水平排列v如果要div水平排列，只需要将div的
7、float属性设置为left即可，例如layout2.html。layout2.html:DIV的水平排列的水平排列 #lay1 width:100px; height:30px; background-color:#90EE90; float:left; #lay2 width:100px; height:30px; background-color:#FFFACD; float:left; #lay3 width:100px; height:30px; background-color:#F08080; float:left; 4.3.3 div4.3.3 div的嵌套的嵌套vdiv之间可
8、以互相嵌套，可以通过设置div的相关属性来确定各个div之间的位置，例如layout3.html，一个div中嵌套三个垂直排列的div。layout3.html:DIV的嵌套的嵌套 #container width:300px; height:120px; background-color:#7B68EE; padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px; text-align:center; margin-left:auto; margin-right:auto; #lay1 width
9、:200px; height:30px; background-color:#90EE90; #lay2 width:200px; height:30px; background-color:#FFFACD; #lay3 width:200px; height:30px; background-color:#F08080; 4.3.4 div4.3.4 div浮动浮动v当div的float属性取值为left或者right时，即成为浮动对象。div用于网页布局时，一般都是嵌套的。如果外层的div没有设定大小，而内层的div又是浮动的，浮动对象的物理位置会脱离文档流，因而对其父元素或者其后的元素的
10、布局会产生影响，甚至会出现布局混乱的现象。 divdiv浮动浮动v没有设置浮动时的效果：01.HTMLdivdiv浮动浮动v设置第1个浮动的div：02.HTMLdivdiv浮动浮动v设置第2个浮动的div：03.HTMLdivdiv浮动浮动v设置第3个浮动的div：04.HTMLdivdiv浮动浮动v改变浮动的方向：05.HTMLdivdiv浮动浮动v再次改变浮动的方向：06.HTMLdivdiv浮动浮动v全部向左浮动，且第一个盒子中增加一行：06b.HTML实例实例layout4.html:DIV的嵌套的嵌套 #container background-color:#7B68EE; tex
11、t-align:center; margin-left:auto;margin-right:auto;padding:10px; #lay1 width:30%; height:50px; background-color:#90EE90; float:left; #lay2 width:60%; height:60px; background-color:#FFFACD; float:right; 浮动的清除浮动的清除v清除浮动可以消除浮动对象对其它元素的影响。一般可以采用四种方法来清除浮动，分别为使用空标签、使用overflow属性、使用after伪对象以及浮动外部元素。1 1使用空标签使
