DIV+CSS布局可视化尝试

摘要：用DIV+CSS布局页面，具备结构清晰、缩减页面代码、方便搜索引擎搜索、内容与表现分离等优点，倍受业界推崇。专业

>> 初探使用CSS+DIV布局网页 使用CSS+DIV布局网页初探 DIV+CSS网页布局方法探讨 CSS+DIV布局与表格布局网页的对比 表格与DIV+CSS的布局设计分析 浅谈Dreamwarever中的DIV+CSS网页布局 运用DIV+CSS设计网站布局 浅析CSS+DIV网页布局的优缺点 CSS+DIV与表格实现网页布局的比较 运用DIV+CSS技术对网页进行布局 浅析网页布局中DIV+CSS技术的应用 DIV+CSS布局技术中的间距处理 基于DIV+CSS技术网页布局应用与实践 DIV_CSS技术在网页布局中的应用 基于DIV+CSS网页布局的教学难点探讨 SEO视角下DIV+CSS网页布局优化研究 DIV+CSS技术在网页布局中的应用 基于DIV+CSS的网页布局技术应用 基于Div+CSS的网页布局方法解析 DIV+CSS 网页设计初探 常见问题解答 当前所在位置：。

步骤2：在设计视图中，单击[插入]面板[布局]工具栏中的“插入DIV标签”，打开如图4所示的对话框在[ID]后的文本框中输入“box1”[确定]，插入一个DIV元素，如图5所示。

步骤3：在刚插入的DIV#box1上单击鼠标右键选择[CSS样式][新建]打开如图6所示的对话框将[定义在]指定为“仅对该文档”[确定]，打开对话框。

步骤4：在打开的对话框中[分类]栏选择[方框]设置[宽]150px,[高]80px，如图2所示在[分类]栏选择[边框]按图3所示设置在[分类]栏选择[背景]设置[背景颜色]#cc99ff[确定]单击F12预览，效果如图7所示。

Width、height属性常用像素（px）作为固定尺寸的单位，当单位为百分比时，DIV元素的宽度和高度为自适应状态，即宽度和高度适应浏览器窗口或父容器的尺寸变化而变化。

下面我们将Width和height都改为100%，操作方法如下：

在图8的[CSS样式]面板中双击“#box1”， 打开[#box1 CSS规则定义]对话框在[分类]栏选择[方框]设置[宽]100%,[高]30%预览，效果如图9所示。

很显然，其宽度（100%）随着浏览器的宽度变化而变化。但是高度的问题出现了，虽然设置为30%，按理说其高度应该随着浏览器的高度变化而变化。然而在本例中DIV高度仅和文本高度相当，好像高度设置没有起作用。

其实设置高度自适应有一个前提，DIV的高度自适应是相对于父容器的高度的，本例中DIV父容器为body或者html（不同浏览器解析方式不同），body或者html在本例中没有设置高度，DIV的高度自适应没有参照物，也就无法生效。

这个问题只要在CSS中设置body标签和html标签的高度，就可解决，操作如下：

步骤1：单击如图8所示的[CSS样式]面板右下角的“新建CSS规则”按钮在打开的如图6所示的对话框中，[选择器类型]选择为[标签(重新定义特定标签的外观)(T)] 在[标签]栏选择“body”标签将[定义在]指定为“仅对该文档”[确定]；

步骤2：在打开的[＃body CSS规则定义] 对话框中，选择[类型]为[方框]设置[高]100%[确定]；

步骤3：用步骤1、2同样的方法设置“html”标签的[高]为100%。

现在，DIV#box1的高度随着浏览器的高度变化而变化了。

3.2DIV水平居中的设置

为了适应不同浏览用户的分辨率，网页设计者要始终保证页面整体内容在页面居中。使用HTML表格布局页面时，只需要设置布局表格的 align属性为center即可。而DIV居中没有属性可以设置，只能通过CSS控制其位置。

这里值得注意的一点是：在布局页面前，网页制作者一定要把页面的默认边距清除，才能保证DIV的正常局中。为了方便操作，常用的方法是使用通配选择符*，将所有对象的边距清除，即margin属性和padding属性的值设为0。

步骤1：单击如图8所示的[CSS样式]面板右下角的“新建CSS规则”按钮在打开的如图6所示的对话框中，[选择器类型]选择为[标签(重新定义特定标签的外观)(T)]在[标签]后的文本框中输入“*”[确定]；

步骤2：在打开的[* CSS规则定义]对话框中，[类型]选择为[方框] 勾选[填充]与[边界]的[全部相同]在[上]后面的文本框中输入“0” [确定]。

使DIV元素水平居中的方法有多种，常用的方法是用CSS设置DIV的左、右外边距均为auto，即margin-left属性和margin-right属性的值为auto。

以前面的例子exp1.htm为例，在图8[CSS样式]面板中双击“＃box1” 打开[＃box1 CSS规则定义]对话框在[分类]栏选择[方框]取消[边界]的[全部相同]前的对勾设置[右(G)]、[左(E)]都为[自动]如图10所示[确定]预览，效果如图11所示。

由于左外边距和右外边距的值相等，均为auto，从而实现了水平局中。

3.3 DIV元素的嵌套

与用表格布局页面类似，为了实现复杂的布局结构，DIV元素也需要互相嵌套。不过在布局页面时尽量少嵌套，因为XHTML元素多重嵌套将影响浏览器对代码的解析速度。下面是一个父DIV中嵌套二个子DIV的例子：

步骤1：新建一个文件，保存并命名为exp2.htm；

步骤2：单击[布局]工具栏中的“插入DIV标签”按钮，打开如图4所示的对话框在[ID]后面的文本框中输入名称“fubox”[确定]，插入一个DIV元素；

步骤3：在DIV＃fubox上单击右键选择[CSS样式][新建]，打开如图6所示的对话框将[定义在]指定为“仅对该文档”[确定]

步骤4：在打开的对话框中的[分类]栏选择[方框]设置[宽]300px,[高]200px在[分类]栏选择[背景]设置[背景颜色]#ff0000[确定]；

步骤5：删除DIV#fubox中的默认内容“此处显示 id "fubox" 的内容”，并将光标定位在DIV#fubox中，用步骤2、3、4同样的方法插入一个[名称]zibox1、[宽]140px、[高]80px、[背景颜色]#ffff00的子DIV#zibox1，并将默认内容“此处显示 id "zibox1" 的内容”替换为“第一个子DIV”；

步骤6：用与步骤5同样的方法，在fubox中插入一个[名称]zibox2、[宽]140px、[高]80px、[背景颜色]#ffccff的DIV#zibox2，内容替换为“第二个子DIV”。dw的设计视图如图12所示。

当然，也可以应用3.3节的局中方法，设置父DIV#fubox在浏览器窗口中局中，子DIV#zibox1、DIV#zibox2在父DIV#fubox中局中，请读者自己试验。

3.4 DIV元素的浮动

通过前面的例子不难发现：一个DIV元素在它所在的容器中总是占据一行，在exp2.htm中，DIV#fubox 的宽度为300px，DIV#zibox1与DIV#zibox2的宽度都为140px，DIV#zibox1的宽度加DIV#zibox2的宽度等于280px，按理DIV#zibox1和DIV#zibox2在DIV#fubox中完全可以排列在一行上，但DIV#zibox1与DIV#zibox2却各占据一行，能否使DIV#zibox1与DIV#zibox2并列于一行呢？回答是肯定的,设置CSS中的 “float”属性，可以使多个块状元素并列于一行。

float属性也被称为浮动属性，这个词非常形象。对前面的DIV元素设置浮动属性后，当前面的DIV元素留有足够的空白宽度时，后面的DIV元素将自动流上来，和前面的DIV元素并列于一行。float属性的值有left、right、none和inherit。很多对象都有inherit属性，这是继承属性，代表继承父容器的属性。float属性值为none时，块状元素不会浮动，这也是块状元素的默认值。float属性值为left时，块状元素将向左浮动；float属性值为right时，块状元素将向右浮动。

值得注意的是：使多个DIV并列于一行的前提是这一行有足够的宽度容纳多个DIV的宽度。

在exp2.htm中，设置DIV#zibox1的float属性为left，可以使DIV#zibox1与DIV#zibox2并列于一行，操作如下：

在[CSS样式]面板中（如图12所示）双击“＃fubox #zibox1” 打开[＃fubox #zibox1CSS规则定义]对话框在[分类]栏选择[方框]设置[浮动]为“左对齐”[确定]，dw的设计视图如图13所示，预览效果如图14所示。

这里由于DIV#zibox1设置成向左浮动，“浮”很形象，即飘到面上，而后面的元素就流上来了，所以有如图13所示的设计示图，DIV#zibox1与DIV#zibox2叠在一起，DIV#zibox1浮在上面。若希望设计视图与浏览视图基本一致，则将需要排列在一行的块状元素都设成浮动。读者可以将DIV#zibox2也设置成左浮动或右浮动，看看效果。

浮动属性是CSS布局的最佳利器，可以通过不同的浮动属性值灵活地定位DIV元素，以达到灵活布局网页的目的。但有时候由于前面的元素定义了浮动属性，往某个位置浮了而又不希望后面的元素流上来，怎么办呢？

为了更加灵活地定位块状元素，CSS提供了clear（清除）属性，clear属性的值有none（无）、left（左对齐）、right（右对齐）和both（两者），默认值为none。当多个块状元素由于前面的元素设置成浮动属性而并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性。clear（清除）属性在[CSS规则定义]对话框的[方框]类中定义，如图15所示，读者可自己练习。

3.5 列表元素布局

页面大块区域的布局一般使用DIV元素，而在某些区域也使用其他元素，如使用比较广泛的列表元素（ul li标签），在传统的HTML页面制作中，列表元素使用并不多，而在CSS的帮助下，列表元素变得空前强大，甚至用于小区域布局。这里我们讨论DIV ul li的布局。

列表元素的li是块状元素，所以有宽度和高度设置，并且可以通过浮动属性的设置使多个li元素并排。这种结构非常适合于网页的导航条布局。在页面布局时，列表元素不需要编号，所以列表元素更多使用无序列表ul标签。下面我们来制作如下所示的导航条：

步骤1：新建一个文件，保存并命名为exp3.htm；

步骤2：应用前面介绍的方法插入一个DIV标签，并命名为：globalnav；

步骤3：在DIV＃globalnav上单击右键选择[CSS样式][新建]，打开如图6所示的对话框将[定义在]指定为“新建样式表文件”[确定]在打开的[保存样式表文件]对话框中，指定保存的位置，输入文件名称“nav.css”[保存]；

步骤4：在打开的对话框中的[分类]栏选择[方框]设置[宽]350px,[高]20px，[背景颜色]#999966，[边界]：左auto、右auto

步骤5：创建“*”CSS样式，设置[填充]为0、[边界]为0；

步骤6：删除DIV#globalnav中的默认内容“此处显示 id " globalnav " 的内容”以段的形式输入栏目文字：首页、公司简介、服务理念、产品中心、联系我们选中栏目文字在属性面板中设置为项目列表，如图16所示。

步骤7：在栏目文字上单击鼠标右键选择[CSS样式][新建]，打开[新建CSS规则]对话框（可以看到选择器后的文本框为：#globalnav li，正是我们所要的，不要改变它）[确定]。

步骤8：在打开的[#globalnav li CSS规则定义]对话框中的[分类]栏选择[方框]设置[宽]68px、[高]20px、[浮动]左对齐在[分类]栏选择[边框]勾选3个[全部相同]，设置[样式]实线，[宽度]1px，[颜色]＃333333在[分类]栏选择[列表]设置[类型]无在[分类]栏选择[类型]设置[行高]20px在[分类]栏选择[区块] 设置[文本对齐]局中[确定]。

到此，上面的导航条就做好了，这是一个典型的DIV ul li的布局例子。本例中，CSS样式是独立存储在一个nav.css文件中，实现了内容与表现的分离。

4 应用DIV+CSS布局页面

4.1 将页面内容区块化

在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。这里我们先不考虑“外观”，而是先分析和规划页面结构，将页面内容区块化，如图17所示。

这个页面分为上下4行区域，分别是标志广告区、导航区、主体内容区和版权信息区。而主体内容区又分为左右2个大区，左边为纵向导航区，右边为主体内容区，主体内容区又分为6个不同内容块。

4.2 应用DIV布局

将页面内容区块图用DIV布局，其DIV结构如图18。

通常将整个页面包含在一个大的DIV＃container块中，以便于控制整个页面内容局中显示，DIV#container中嵌套DIV#banner、DIV#links、DIV#content、DIV#footer，其中DIV#banner、DIV#links、DIV#footer的内容布局较简单，而DIV#content相对较复杂些，其内部又嵌套DIV#left和DIV#right，而DIV#right又嵌套DIV#con1、… DIV#con6等6个内容块。这里设置DIV#left向左浮动，DIV#right向右浮动，#con1、… #con6向左浮动，而#footer要设置其clear属性为“both”，即设置[清除]为“两者”。由于篇幅的原因，详细步骤就省略了。

应用DW实现DIV+CSS布局，操作简单，只要充分理解CSS的盒子模型，掌握应用CSS控制页面元素的方法，便能用DIV轻松布局。