任务1-1　使用DIV布局网页

需求：

按图1-1所示的样式进行页面布局的设计。

分析：

整体部分分为上中下三部分，中间部分又分为左中右三个子部分，这里包含了DIV的嵌套结构。这个任务基本上包括了页面布局中所有可能的需求。

这一任务虽然可以通过＜table＞标签实现，这里我们采用DIV+CSS完成所给任务的设计。

DIV作为网页中的HTML标签，主要作用是作为容器，容纳文字、图像、子DIV和其他HTML标签。

CSS（Cascading Style Sheets，层叠样式表）。在页面设计中采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS中的样式可以被同一页的多个标签或不同页面的多个标签所引用，在统一界面的风格上有着不可或缺的重要作用。

在实现这一任务时，可以采用自顶向下、由简到繁的方法完成设计，在讲述中逐渐引出必要的知识点和操作方法。

实现：

第一步，新建一个网站（即项目），并添加新项“HTML页面”。打开页面的“源”选项卡，将“＜title＞无标题页＜/title＞”改为“＜title＞网页布局＜/title＞”，在原有的body内，添加三个并列的DIV，并在第一个DIV中添加文字“我的LOGO”，在第二个DIV中添加文字“主体部分”，在第三个DIV中添加文字“版权信息：苏州工业园区服务外包职业学院信息技术系”，所产生的源代码如图1-2所示。

从图1-3中可以看出，并列的三个DIV在没有设置任何样式的情况下，空间是垂直排列的，这是DIV默认的布局方式。

方法提示：VS 2013中添加标签时有自动完成结束标签的功能。

第二步，按图1-4设置三个DIV的背景色，从上到下分别为：“#EEE”“#CCC”“#AAA”它们是深浅不同的三种灰色，目的在于看出三个DIV不同区域。

设置方法：在VS 2013中的“源”中按下列格式，直接输入style样式设置，所产生的代码和静态页面如清单1-1所示。

清单1-1　上中下三个不同背景DIV层

方法提示：VS 2013中设置样式时有智能提示（Ctrl+J）。

第三步，设置上中下三个DIV之间的边距为5px。

只需设置第二个DIV的style样式的上边距属性和下边距属性为5px，如清单1-2所示。

清单1-2　设置第二个DIV层的外间距

界面效果如图1-5所示。

第四步，将第一个DIV和第三个DIV的文本居中显示。

只需在它们的style中设置属性text-align： center。

界面效果如图1-6所示。

第五步，改变第一个DIV和第三个DIV的区域高度，使之分别为120px和50px。

只需在样式中设置属性height：120px和height：50px，产生的界面效果如图1-7所示。

第六步，改变第一个DIV和第三个DIV中文本的字体相关样式属性。

第一个DIV设置大小为36px并加粗，第三个DIV设置大小为12px。

只需在第一个DIV中设置font-size：36px和font-weight：bold，第三个DIV中设置font-size：12px，产生的界面效果如图1-8所示。

第七步，将以上三个DIV宽度都设置为800px；并要求它们相对IE浏览器窗口水平居中，方法有两种：

方法一：设置每个DIV样式属性；

方法二：添加一个父DIV以包容这三个DIV，只要设置父DIV样式属性就能控制内层的DIV。

后一种方法显然不仅减少了代码量，同时也提高了可维护性，建议读者在今后的界面布局或程序设计中尽量减少代码重复量，提高代码可重用性和可维护性。CSS主要意义也就在于此，外层定义过的部分样式会自动被内层所继承。

如果按照清单1-3的方法，则产生图1-9所示的界面效果。

清单1-3　使内部居中的DIV层

图1-9的水平居中不符合任务的要求，它只是将内层文本居中，并未让内层DIV居中，这是因为内层DIV文本继承使用了“text-align：center”样式属性的设置，将上中下DIV内的文本居中。如果将三个DIV看作文本就能实现这一要求，实现办法按清单1-4，在此DIV外层再加一个更外一层的DIV将“text-align：center”样式属性的设置移入其中。

清单1-4　设定内部DIV层缺省宽度

产生的界面效果如图1-10所示。

第八步，去除主体部分中文字，添加三个水平排列的DIV将其高度设为400px（也可以设置其上层的高度为400px，本层高度设置为100％），改变默认的垂直排列方式，使得下一个DIV出现在前一个DIV的右边，除了设置前一个DIV的宽度之外，重要的还要设置其float属性为left，最右边DIV可以不设置。为使左中右留有间隙，在主体中部DIV上设置相关的margin属性。清单1-5是主体部分源代码。

清单1-5　建立左中右排列的三个DIV层

产生的效果如图1-11所示。

说明

外层DIV标签的样式属性设置：“text-align：center”，不能使自身居中，只能使其开始标记＜div＞和结束标记＜/div＞之间的内容居中，这样作为内部三个DIV的容器，它被居中放置了，同时这些设置一直被传入最内层；如果想让“主体部分”文本左对齐（见图1-11），只需在其DIV标签中添加样式属性设置：“text-align：left”，以覆盖外层的相同样式属性设置即可。

对position：fixed属性的设置IE 7.0是支持的，而IE 6.0却不支持。如何使用某一个DIV位置固定，将在下一单元中通过JavaScript解决。

左中右间隙的颜色是由主体中间DIV的背景色决定，将#CCC改为#FFF，就能实现白色间隙