我的书签
添加书签
移除书签33.3 CSS实现框图
在第33.2节中，设置好了DIV，并命名好CLASS和ID的选择符，接下来设置CSS的样式，CSS对网页是非常重要的，所以如何用CSS实现效果也是需要技巧的。同时，写好CSS后也要对CSS代码进行优化，这样对网页才有更好的效果。
33.3.1 实现内容模块
从上面的层中设置了ID和CLASS选择符，下面是全部的样式表，对于比较难理解的样式做了注解（CSS代码用/**/注解，而HTML标记用＜！——＞注解），在存在很多CSS代码的情况下，需要单独新建一张样式表，然后保存为“.css”为后缀的文件，要使用时链接到网页中即可，博客主页的样式内容如下。
代码33.1 源代码\第33章\style.css
/整个网页的样式设置/
01 body
02 {
03 margin：0px；
04 padding：0px；
05 background：#e1eff1；
06 }
07 /头部层样式/
08 .blogheader
09 {
10 width：998px；
11 height：161px；
12 position：relative；
13 background：url（"images/headerbg.gif"）；
14 margin：0 auto；
15 }
16 /导航栏样式设置/
17 .blogheaderindex
18 {
19 width：998px；
20 height：161px；
21 position：relative；
22 margin：0 auto；
23 }
24 .myblogbanner
25 {
26 width：600px；
27 margin：0 auto；
28 font-size：14px；
29 font-family：宋体；
30 color：Orange；
31 padding：5px 20px；
32 }
33 /设置博客个人信息相片/
34 .myphoto
35 {
36 width：140px；
37 height：140px；
38 margin：10px 0px 10px 40px；
39 border：1px solid#666；
40 }
41 /设置小相片/
42 .mysmallphoto
43 {
44 width：60px；
45 height：60px；
46 margin：5px；
47 float：left；
48 border：1px solid#ccc；
49 }
50 .titlebox
51 {
52 width：78px；
53 height：41px；
54 margin-left：3px；
55 float：left；
56 font-family：黑体；
57 line-height：22px；
58 font-size：12px；
59 text-align：center；
60 background：url（"images/titlebg2.gif"）；
61 }
62 .titleboxblack
63 {
64 width：78px；
65 height：41px；
66 margin-left：3px；
67 font-family：黑体；
68 line-height：22px；
69 float：left；
70 color：White；
71 font-size：12px；
72 text-align：center；
73 background：url（"images/titlebg1.gif"）；
74
75 }
76 .blogbanner
77 {
78 width：680px；
79 position：absolute；
80 right：10px；
81 bottom：5px；
82 }
83 .blogbody
84 {
85 width：998px；
86 overflow：hidden；
87 clear：both；
88 background：#fff；
89 margin：0 auto；
90 }
91 /首页左边flash/
92 .flashbox
93 {
94 width：300px；
95 height：200px；
96 position：relative；
97 margin：5px 0px 0px 5px；
98 float：left；
99 }
00 .flash1
101 {
102 width：13px；
103 height：42px；
104 position：absolute；
105 left：0px；
106 top：0px；
107 background：url（"images/flash1.gif"）；
108 }
109 .flash2
110 {
111 width：32px；
112 height：48px；
113 position：absolute；
114 right：0px；
115 top：0px；
116 background：url（"images/flash2.gif"）；
117 }
118 .flash3
119 {
120 width：12px；
121 height：34px；
122 position：absolute；
123 left：0px；
124 bottom：0px；
125 background：url（"images/flash3.gif"）；
126 }
127 .flash4
128 {
129 width：17px；
130 height：30px；
131 position：absolute；
132 right：10px；
133 bottom：0px；
134 background：url（"images/flash4.gif"）；
135 }
136 .flashbody
137 {
138
139 height：190px；
140 padding：10px 0px 0px 15px；
141 background：url（"images/18.gif"）repeat-x；
142 }
【代码解析】代码第1～6行为类型body的类型选择符，其他都是类选择符。
下面的样式表是首页右边的导航条样式。
/首页右边的导航条/
01 .titlebanner
02 {
03 width：675px；
04 margin：5px 0px 0px 15px；
05 float：left；
06 background：url（"images/titlebannercenter.gif"）repeat-x；
07 }
08 .keytitle
09 {
10 width：672px；
11 float：left；
12 margin：5px 0px 0px 15px；
13 border：1px solid#ffccb4；
14 }
15 .bgup
16 {
17 height：12px；
18 background：#000000；
19 }
20 .bgcolor
21 {
22 clear：both；
23 height：4px；
24 background：#333；
25 }
26 .bgcolorred
27 {
28 width：18%；
29 height：4px；
30 float：left；
31 background：#cc0000；
32 }
33 .bgcolorblue
34 {
35 width：15%；
36 height：4px；
37 float：left；
38 background：#669900；
39 }
40 .bgcolorgreen
41 {
42 width：30%；
43 float：left；
44 height：4px；
45 background：#009999；
46 }
47 .bgcolorgray
48 {
49 width：12%；
50 float：left；
51 height：2px；
52 background：#333；
53 }
【代码解析】以上代码为右边导航条的样式，每个样式都有自己的背景色，而且都通过width和height设置了范围，而且基本都是左漂移。
下面的代码是对博客的功能进行设置。
01 .blogcon
02 {
03 margin：5px；
04 font-size：14px；
05 clear：both；
06 }
07 .blogright
08 {
09 width：185px；
10 height：200px；
11 margin：5px 5px 0px 0px；
12 float：right；
13 border：1px solid#ffccb4；
14 }
15 .blogleft
16 {
17 width：250px；
18 margin：5px 0px 0px 5px；
19 float：left；
20 border：1px solid#ffccb4；
21 }
22 .blogcenter
23 {
24 width：546px；
25 height：200px；
26 margin：5px 0px 0px 5px；
27 float：left；
28 border：1px solid#ffccb4；
29 }
【代码解析】以上代码主要为中间栏的内容，每一层都设置了外补丁，向左漂移。
以上CSS代码实现了博客的主要功能结构，通过CSS设置可以控制HTML标记的样式。当内容模块实现后，就要来实现页面效果了，下一节介绍对页面的操作。
