32.2.2　用CSS实现页面头部

通过设置好的HTML代码的层标记及与之关联的选择符后，需要用CSS来控制这些标记，要注意的是在DIV中设置ID选择符时，需要在CSS代码中用“#”开头，且后面接的是该名称，表示ID选择符。同理，如果是类选择符，同样在CSS代码中把该名称加上，但类选择符名前用“.”表示，后面的CSS代码都用大括号包含起来。

本小节主要设置网页的整体页面和头部样式的控制。所谓整体网页控制指的是对＜body＞＜/body＞标记进行控制，表示对网页全局布局进行设置，这种表示方法在CSS中叫类型选择符（与类选择符不同），除了body外还有p、img等标记类型。本实例中先对body标记（为了兼容不同浏览器，需要设置html、body，如下面代码所示）、img标记的边框清除，以及头部的样式进行设置，如下代码。

/设置网页的全局/

01 html, body{

02 margin：0；

03 padding：0；

04 height：100%；

05 /设置字体类型/

06 font-family："Times New Roman"；

07 font-size：12px；

08 background：url（images/bg3.jpg）；

09 }

10 /设置头部容器层/

11 #header

12 {

13 width：776px；

14 margin：auto；

15 position：relative；

16 height：15%；

17 background：#ffffff；

18 border-left：1px solid#ffffff；

19 border-right：1px solid#ffffff；

20 }

21 /**设置图片标记/

22 img

23 {

24 border：0；

25 }

26 /设置层LOGO/

27 #logo

28 {

29 margin-top：10px；

30 height：85%；

31 }

32 #banner

33 {

34 width：100%；

35 padding：2px 0px；

36 position：absolute；

37 bottom：0px；

38 /文本右对齐/

39 text-align：right；

40 color：#fff；

41 background：#666；

42 border-bottom：1px solid#ffffff；

43 border-top：1px solid#ffffff；

44 }

45 .showright

46 {

47 margin：10px 10px 0px 0px；

48 float：right；

49 }

【代码解析】在上述代码中，第3～12行只对头部的标记进行设置，通过对头部的设置，头部控制的效果表现出来了。在代码第1～9行对全局body控制时，字体大小表示为12像素，引用一张图片作为页面的背景图像，设置内补丁和外补丁为0，头部变成白色背景，且中文与英文的文本都漂移到页面的右边，“电信访问”、“网通用户”等文本也出现灰颜色背景且文本右对齐，效果如图32.3所示。

图　32.3　设置头部样式

说明　以上内容是对页面头部进行控制，整个宽度比较宽，具体页面请浏览光盘中源代码\第32章页面内容。