任务1-1 使用DIV布局网页
需求：
按图1-1所示的样式进行页面布局的设计。
图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-2 三个DIV源代码
从图1-3中可以看出，并列的三个DIV在没有设置任何样式的情况下，空间是垂直排列的，这是DIV默认的布局方式。
方法提示：VS 2013中添加标签时有自动完成结束标签的功能。
第二步，按图1-4设置三个DIV的背景色，从上到下分别为：“#EEE”“#CCC”“#AAA”它们是深浅不同的三种灰色，目的在于看出三个DIV不同区域。
图1-3 三个DIV呈上中下排列
图1-4 设置三个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所示。
图1-5 设置上中下三部分的间隔
图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所示。
图1-7 设置DIV的高度
图1-8 设置第三个DIV的字体大小
第七步，将以上三个DIV宽度都设置为800px；并要求它们相对IE浏览器窗口水平居中，方法有两种：
方法一：设置每个DIV样式属性；
方法二：添加一个父DIV以包容这三个DIV，只要设置父DIV样式属性就能控制内层的DIV。
后一种方法显然不仅减少了代码量，同时也提高了可维护性，建议读者在今后的界面布局或程序设计中尽量减少代码重复量，提高代码可重用性和可维护性。CSS主要意义也就在于此，外层定义过的部分样式会自动被内层所继承。
如果按照清单1-3的方法，则产生图1-9所示的界面效果。
清单1-3 使内部居中的DIV层
图1-9 外层水平居中对内层的影响
图1-9的水平居中不符合任务的要求，它只是将内层文本居中，并未让内层DIV居中，这是因为内层DIV文本继承使用了“text-align：center”样式属性的设置，将上中下DIV内的文本居中。如果将三个DIV看作文本就能实现这一要求，实现办法按清单1-4，在此DIV外层再加一个更外一层的DIV将“text-align：center”样式属性的设置移入其中。
清单1-4 设定内部DIV层缺省宽度
产生的界面效果如图1-10所示。
图1-10 使内层DIV居中
第八步，去除主体部分中文字，添加三个水平排列的DIV将其高度设为400px（也可以设置其上层的高度为400px，本层高度设置为100％），改变默认的垂直排列方式，使得下一个DIV出现在前一个DIV的右边，除了设置前一个DIV的宽度之外，重要的还要设置其float属性为left，最右边DIV可以不设置。为使左中右留有间隙，在主体中部DIV上设置相关的margin属性。清单1-5是主体部分源代码。
清单1-5 建立左中右排列的三个DIV层
产生的效果如图1-11所示。
图1-11 主体部分添加了三个水平排列的DIV
说明
外层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，就能实现白色间隙