我的书签
添加书签
移除书签32.2.3 用CSS实现页面体
通过设置头部样式可以控制网页头部效果。本小节来控制网页体的效果，即中间部分的效果，在HTML代码中，设置了DIV的标记，且列出各模块的内容，而在右边的层是空内容，只有标记存在。下面对网页的中间部分CSS代码进行控制，为了让中间部分与头部区别开来，下面的代码给出实现。
/CSS代码：设置内容区的样式/
01 #content
02 {
03 /设置宽度、高度和对齐方式/
04 width：778px；
05 margin：auto；
06 height：70%；
07 }
08 /*页脚样式/
09 #ender
10 {
11 width：776px；
12 margin：auto；
13 height：14%；
14 border：1px solid#ffffff；
15 }
16 /设置页脚中的标记P/
17 #ender p
18 {
19 margin：2px 0px 0px 10px；
20 color：#666666；
21 }
22 /设置中间区域的左边样式/
23 #left
24 {
25 width：175px；
26 height：100%；
27 float：left；
28 /设置边框信息/
29 border-left：1px solid#ffffff；
30 border-right：1px solid#ffffff；
31 background：#e6e6e6；
32 }
33 /设置中间区域的右边样式/
34 #right
35 {
36 width：600px；
37 height：100%；
38 float：right；
39 background：#cccccc；
40 border-right：1px solid#ffffff；
41 }
42 #rightbanner
43 {
44 width：120px；
45 float：left；
46 }
47 /中间部分右边内容显示/
48 #rightbox
49 {
50 width：480px；
51 height：100%；
52 float：right；
53 padding：10px；
54 background：#cfcfcf；
55 }
56 /不同的层设置不同的样式/
57 .enderbox1
58 {
59 width：175px；
60 height：100%；
61 float：left；
62 background：url（images/bg12.jpg）；
63 border-right：1px solid#ffffff；
64 }
65 .enderbox2
66 {
67 width：600px；
68 height：57%；
69 float：right；
70 background：#dadada；
71 }
72 .enderbox3
73 {
74 width：600px；
75 height：42%；
76 float：right；
77 background：#acacac；
78 border-top：1px solid#ffffff；
79 }
80 /设置页脚中的列表层/
81 #menu
82 {
83 margin：0px 10px 10px；
84 padding：0px 5px 5px 5px；
85 border：2px solid#ffffff；
86 border-top：0px；
87 background：#a1effb；
88 }
89 /无序列表的UL设置/
90 #menu ul
91 {
92 margin：0；
93 padding：0；
94 /边框设置/
95 border：medium none；
96 /去掉列表中的前面标记/
97 list-style-type：none；
98 }
99 /列表中的各项/
100 #menu li
101 {
102 /设置边框颜色和字体大小/
103 border-top：1px solid#fff；
104 background：#08aeba；
105 font-size：14px；
106 font-weight：800；
107 }
108 /设置表项中的链接样式/
109 #menu li a
110 {
111 /设置链接区域为链接块/
112 display：block；
113 /设置字体类型/
114 font-family：Times New Roman, ARIAL, Courier；
115 font-weight：blod；
116 padding：10px 0px 5px 31px；
117 width：110px；
118 color：#020202；
119 /背景图片/
120 background：url（images/dot.gif）transparent no-repeat 8px 14px；
121 text-decoration：none；
122 }
123 /当处于链接时的状态/
124 #menu li a：hover
125 {
126 background：#0d5472；
127 }
128 .current
129 {
130 padding：7px 10px；
131 background：#0d5472；
132 text-align：right；
133 color：white；
134 }
【代码解析】通过上述的CSS代码控制，表示HTML标记用CSS的修饰，表现出从无序显示到有条理地显示，从页面头部中可以看到，LOGO的图标出现在左边，而且与页面头部层的背景相同，但整个网页的背景为红色，这显示出了LOGO与头部的关系，同时移动到右边的文本中，链接到不同的网页版本，在布局中体现出页头的内容对称性，使页面更美观。
页面中部的布局，先从左边对DIV分析，左边的层表现白色的背景，而各链接块的颜色与该页整体颜色深度不同，从颜色上很容易区别。在页面体中，左边的区域的文本向右显示时，表示正处于该模块在右边区域显示状态，其他模块向左显示，当鼠标置于文本上时，会出现手型，因为是处于链接状态。
网页中间部分的右边区域，分成两个不同颜色的部分，在第一部分中，在左栏区域中间出现一个空层，在另一部分中，用来显示“首页＞＞关于禧添”，该位置是页面将要显示内容的区域。该区域与中间部分的背景颜色有点不一样，中间部分的颜色更深，也可以从颜色上区分不同的区域。
同时对于页脚的布局，左边是用中国风的图案表示，因正处于过中国年时的站点都喜欢带上过年的喜庆，这也是本实例用红色背景的原因。在页脚部分的右边，显示的是企业的信息，如地址与联系电话等。在国内网站都需要到信息产业部的网站上备案才可以放到互联网上。所以备案号也需要在页脚出现并链接指向信息产业部备案网站。
本实例的风格除了过年喜庆的红色外，还以白色和灰色为主，且灰色在不同的层深度不同中，使网页中每个部分都有所不同，效果如图32.4所示。
图 32.4 用CSS实现标记
