31.2　用DIV+CSS布局

当确定好效果图以及对其切片处理后，就需要对这个页面布局了，除了上面提到的用顺序布局外，还将要用到布局的核心知识，即用DIV和CSS结合控制HTML效果。CSS样式将会单独出一个文件，通过外部链接的方式把该文件引用进来。然后用顺序布局的方式进行布局，下面分别对不同顺序的内容布局进行介绍。

31.2.1　实现页面头部

确定好页面布局方式和方法后，就开始对页面的头部部分进行布局，从构思和图片切图（先由美术工作人员对网页设置效果图，然后根据需要对效果图切图，提供给编写HTML的工作人员使用）中可以知道，头部只由一张图片组成，其中LOGO标志也被包含在头部的图片中。

布局的关键部分是将图片放置在DIV层中，且设置头部的层为居中对齐，然后通过CSS样式控制层的选择符。对于CSS样式设置，本实例将样式表单独保存为一张以CSS为后缀的文件，然后通过外部链接引入到页面中，除了可以节省本张网页的代码空间外，还可以链接到其他页面中，即需要新建其他网页时，只需在该新建的网页上链接保存后的样式文件即可，样式文件的链接如下所示。

＜link type="text/css"rel="stylesheet"href="style.css"/＞

外部链接CSS样式由标记＜link＞完成，该标记没有结束标记对，需要在结束尖括号前输入斜线表示结束，参数type表示链接的类型，上面代码代表样式文本，rel表示为样式表，这个参数在＜link＞标记中很重要，如没有设置本参数，网页与样式文件不能成功关联。最后需要链接样式文件时，用到href参数，表示文件的地址，实例中的样式文件在网页的同一目录中，用到的是相对路径。

链接好样式表后，在＜body＞＜/body＞标记对中设置层布局，即DIV布局，然后确定好选择符，如果选择符在本网页中只出现一次，即可设置为ID选择符；如果需要复合出现同一个样式，则设置类（CLASS）选择符效率会更高。下面是对DIV的布局设置，头部表示一张图片，用到＜img＞标记把图片引用进来，如代码31.1所示。

代码31.1　源代码\第31章\游戏网站布局.html

——————————————文件名：游戏网站布局.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞游戏网站布局＜/title＞

04 ＜link type="text/css"rel="stylesheet"href="style.css"/＞

05 ＜/head＞

06 ＜body＞

07 ＜！—设置头部，引用图片—＞

08 ＜div class="box"＞＜img src="images/head.gif"/＞＜/div＞

09 ＜！—以下内容是其他位置的布局—＞

10 ＜/body＞

11 ＜/html＞

【代码解析】代码第8行设置层的类（CLASS）选择符为“box”，表示为容器层，在布局的其他位置也可以用到该类选择符。设置好DIV布局并确定选择符后，需要在CSS样式中，来控制这些标记，首先需要用CSS对整个网页做一些设置，如网页的背景颜色、网页中的字体大小、＜body＞标记的内外补丁等。在CSS中，对上面的类（CLASS）选择符设置宽度属性和层居中对齐，在设置好宽度后才可以让层居中，而且不能缺少网页的标准声名，在＜html＞中输入以下代码：

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

以上代码表示网页在IE浏览器中居中对齐时，所声明的网页文档类型，而在火狐（FF）浏览器中可以不加，但了兼容这两个主流浏览器，所表现对页面的居中，本实例添加上面的代码。

综上所述，若设置层居中需要三个条件，第一为对doctype的声明；第二为层宽度的确定；第三也是关键的一步，即用CSS设置margin属性值为auto。下面是CSS代码对上面完整HTML标记控制的代码。

/CSS代码：控制头部/

/设置全局样式/

01 body

02 {

03 /设置整个网页的内外补丁/

0 4 margin：0；

0 5 padding：0；

06 /设置字体大小/

07 font-size：12px；

08 /设置背景颜色/

09 background：#a3a3a3；

10 }

1 1/设置容器层，主要功能为层居中/

12 .box

13 {

14 /确定宽度/

15 width：955px；

16 /设置外补丁为auto/

17 margin：auto；

18 }

【代码解析】以上代码是对网页主体的设置。代码第4行设置了宽度为995px，代码第17行设置了外补丁margin为auto。

通过上面的设置，所表现出来的效果为一张图片在一个层中，这张图片正好是网页中的头部信息，宽为995像素。网页的标准布局宽度有778像素和1002像素两种会常用到。在分辨率为800×600的情况下，网页宽度保持在778像素以内合适，而分辨率为1024×768或者更高时，网页宽度保持在1002像素以内最合适。本实例的网页相对1024×768分辨率的用户，宽为995像素，显示器分辨率更高的用户在浏览该主页时，在浏览器的左右两边还会出现空白空间，效果如图31.2所示。

注意　在HTML标记中，用＜center＞＜/center＞可以设置对象居中，而上面所讲的居中是用CSS设置DIV层的居中。

图　31.2　设置网页的头部