DIV+CSS学习日记-DIV+CSS布局技巧

使用DIV布局对于一个初学都来说应该不是一件容易的事，网上的教程大多只针对初学都来说，其真正的实用性并不是很高，当你在制作页面过程中碰到问题再查一些相关的资料你就会发现一些更有用的东西，这里我对学习过程中碰到最多最常见的问题做一些总结，相信对于初学者来说会更快地适应使用DIV+CSS进行网页布局。

对于DIV+CSS的网页来说，嵌套两层以上的DIV是很常见的，就像表格里面再加一个表格一样，但实际DIV布局时需要嵌套的层数要远远少于表格，这也决定了这类网页在被搜索引擎搜索时的优势-快而全。

首先看看下面这个DIV布局图：

最外层

第一层嵌套层

第二层嵌套层

第三层嵌套层

第四层嵌套层

第五层嵌套层

第六层嵌套层

其结构代码为：

<div>最外层
<div>第一层嵌套层</div>
<div>第二层嵌套层</div>
<div>第三层嵌套层</div>
<div>第四层嵌套层</div>
<div>第五层嵌套层</div>
<div>第六层嵌套层</div>
</div>

先说说为什么DIV布局在最外层嵌套一个DIV：

这个DIV主要用于固定DIV的内在布局，如果没有这个DIV做容器，那么当用户将浏览器窗口缩到比页面小时，DIV的布局会出现混乱，而在使用这个DIV时需要设定其宽度才能达到固定页面宽度的效果，而且这个DIV也能决定见面的整体对齐方式如居中。

我使用的这个最外层DIV的代码如下：

style为样式效果，等同于CSS，以后我会说明引用CSS的通用方式，这里解释下代码：

margin用来调整间距，一般分上、下、左、右四个间距参数，在DIV布局中一般也用来调整对齐方式，这里的MARGIN: 0px auto表示DIV与浏览器的浏览区上下间距为0像素(px)、左右间距自动调整(auto)，这样整个DIV就居中了，如果是想居右的话可以改成：MARGIN: 0px 0px 0px auto

width用来设置DIV的宽度，上面说了，这样可以固定整个页面的DIV布局

background-color用来设置背景色

border用来设置边框，这里有三个参数：1px表示边框粗细为1像素、solid表示边框用的是实线，你也可以设置为另一种样式如虚线为dashed、最后的参数是边框的颜色

DIV的排版靠的是CSS里的Float(浮动),其最常用的两个参数是left和right分别为左浮动和右浮动,上面的例子中一、二、三层用的是左浮动，四、五两层用的是右浮动，第六层是清除浮动后的排列效果，嵌套层的代码为：

<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; WIDTH: 120px; BORDER-BOTTOM: #ff9900 1px solid; HEIGHT: 50px">第一层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; WIDTH: 120px; BORDER-BOTTOM: #ff9900 1px solid">第二层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; BORDER-LEFT: #ff9900 1px solid; WIDTH: 56px; BORDER-BOTTOM: #ff9900 1px solid">第三层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: right; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第四层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: right; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第五层嵌套层</DIV>
<DIV style="CLEAR: both; BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第六层嵌套层</DIV>

当你把上面的代码组合起来的时候用FireFox火狐浏览器浏览的时候并不能得到例子所显示的效果，因为最外层无法自适应当前高度，所以你需要在最后面再加一层嵌套层，其代码为:

这个排版功能我们经常会在显示详细内容的子页里用到。

最后将代码合成后如下：

<DIV style="BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #333333 1px solid; MARGIN: 0px auto; BORDER-LEFT: #333333 1px solid; WIDTH: 300px; BORDER-BOTTOM: #333333 1px solid; BACKGROUND-COLOR: #ccff00">最外层
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; WIDTH: 120px; BORDER-BOTTOM: #ff9900 1px solid; HEIGHT: 50px">第一层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; WIDTH: 120px; BORDER-BOTTOM: #ff9900 1px solid">第二层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: left; BORDER-LEFT: #ff9900 1px solid; WIDTH: 56px; BORDER-BOTTOM: #ff9900 1px solid">第三层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: right; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第四层嵌套层</DIV>
<DIV style="BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; FLOAT: right; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第五层嵌套层</DIV>
<DIV style="CLEAR: both; BORDER-RIGHT: #ff9900 1px solid; BORDER-TOP: #ff9900 1px solid; BORDER-LEFT: #ff9900 1px solid; WIDTH: 175px; BORDER-BOTTOM: #ff9900 1px solid">第六层嵌套层</DIV>
<DIV style="CLEAR: both"></DIV></DIV>

最后总结下：在排版时最需要搞清楚的是排列顺序及空间如何占用，像上面第一层用的是大块层、二、三层用的是小块层，那么二三层下面的空间可以用右浮动参数来排列填充，就像上面例子中的四、五层。

文章来自：http://blog.china.com/u/061206/19517/200711/1370642.html

加支付宝好友偷能量挖...

2009-8-11评论(0)网络

阅读(179)喜欢(1)分类：HTML/CSS兼容/XML