31.2.3　实现页面底部

底部的设置很简单，但需要设置底部层中国风的花边框，然后用一条渐变图像作为背景，里面的文本就是底部信息，其中层布局是指在前面定好的box容器层中设置ID为层，然后用设置为ID为bottom的选择符来表示页脚信息，这些文本信息设置为居中。HTML代码如下。

＜！—页脚信息—＞

01 ＜div class="box"＞

02 ＜div id="b"＞

03 ＜/div＞

04 ＜div id="bottom"＞

05 页脚

06 ＜/div＞

07 ＜/div＞

【代码解析】代码第1行定义容器层的样式为box，代码第4～6行为页脚层。

设置HTML标记后，需要用CSS来控制这些标记，在标记中，box是前面已定好的类选择符，可以在一张页面中重复使用，而且表示居中对齐，对其他两个层设置主要用来表达网页底部的样式，代码如下。

/CSS样式：表示页脚信息/

01 #bottom

02 {

03 /设置背景图片/

04 background：url（images/xia.gif）；

05 /文本居中/

06 text-align：center；

07 /设置高度，以免层过高/

08 height：62px；

09 }

10 #b

11 {

12 /设置高度，高度刚好是背景图片的高度/

13 height：24px；

14 /清除两边的漂移/

15 clear：both；

16 /设置背景图片/

17 background：url（images/b.gif）repeat-x；

18 }

【代码解析】以上代码10～18行为底层b的设置，图片b.gif按横轴平铺一层，bottom在b层中，对文字进行约束。

通过上面HTML和CSS的设置，对底部的设置为设置页脚层的顶端为花边框，其下的层设置的背景为一条渐变颜色，而文本是属于居中的，每条文本都会在中间部位显示，效果如图31.6所示。

图　31.6　设置底部