sablog模板设计教程[3] - default/style.css文件分析

技术

———————————————————-        +                +
titlelogo                                |
}pageheader
navlink         |
———————————————————-             +                |
description        |     guestlink                }topmenu
———————————————————-+           +                 |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
left        |         right                  |                        |
|                           |                        |
|                           }page                }这部分是inmain 这之外是outmain
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|        page**                   |                        |

———————————————————–                        |
footer
———————————————————–                         +

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
body {//整体页面的样式
margin: 0px;//外补丁设置为0,主要为了去掉页面内容和浏览器间的空隙
font: 12px "Verdana", "Tahoma", "sans-serif";//字体样式
line-height: 140%;//行高
color: #000;//字体颜色
background-color: #cdd6dd;//最底层背景颜色
text-align: center;//页面内容对齐方式,居中
}
form {//表单样式
padding: 0px;//表单内补丁为0,为了去掉表单其他内容间的空隙
margin: 0px;//表单外补丁为0,为了去掉表单其他内容间的空隙
}
h1 {
font-size: 14px;
color: #000;
margin: 0px;
padding: 0px;
}
ol li {//列表的样式
list-style-position: outside;
list-style-type: decimal;
}
a {//链接的样式
color: #333399;
text-decoration: underline;//默认有下划线
}
a:hover {//鼠标在链接上停留时链接的样式
color: #CC0000;
text-decoration: none;//停留时无下划线
}
td {//表格中的样式
font: 12px "Verdana", "Tahoma", "sans-serif";
line-height: 160%;
color: #000;
}
textarea {//表单文本域的样式,添加评论时的文本域等都被这个控制着
font: 12px "Verdana", "Tahoma", "sans-serif";
padding: 4px;
}
input  {//控制文本框 密码框和按钮的样式
background-color: #fff;
color: #000;
font: 12px "Verdana", "Tahoma", "sans-serif";
padding: 3px;
}
hr {//输出一条横线  sablog中很多地方都是用这个来分隔内容的
height: 1px;
border: 1px solid #B3CBE1;
margin-top: 15px!important;
margin-top: 5px;
margin-bottom: 15px!important;
margin-bottom: 5px;
}
#description {//站点描述样式
float: left;
padding-top: 0px!important;
padding-top: 3px;
text-indent:2px;
font: 12px "Verdana", "Tahoma", "sans-serif";
color: #003366;
}
#guestlink {//菜单链接的样式   就是 注册 | 登陆 字样的样式
float: right;
font: 12px "Verdana", "Tahoma", "sans-serif";
color: #003366;
}
#page {//中间部分整体样式
width: 100%;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
float: left;
background-color: #fff;
background-image: url(sidebar_border       $1.gif);
border-bottom: 1px dotted #386792;
margin-bottom: 1px;
clear:both;
}
#viewmode {//浏览模式 标准 列表 字样的样式
float: right;
}
#right {//中间右侧部分的样式
float: right;
width: 525px;
padding: 12px 15px 15px 15px;
text-align: left;
}
#top {
padding-bottom: 12px;
margin-bottom: 15px;
border-bottom: 1px solid #386792;
}
#left {//中间右侧部分的样式
float: left;
margin: 0px;
width: 180px;
padding: 20px 15px 15px 15px;
text-align: left;
}
#left h2 {//标题的样式 在default里用来控制左侧 日志分类 热门标签 日志归档 搜索文章 等字样的样式
font-size: 14px;
color: #999;
padding: 15px 0px;
margin: 15px 0px 0px 0px;
border-top: 1px solid #B3CBE1;
}
#left ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#left ul li {
margin-bottom: 2px;
overflow:hidden;
display:block;
width:178px !important;
width /**/:178px;
clear: both;
}
#left #icp {//备案信息样式
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #B3CBE1;
}
.formbox {
line-height: 150%;
padding: 5px 0px;
}
.title {//标题
font-size: 14px;
clear:both;
position:relative;
height:18px;
font-weight: bold;
text-indent: 5px;
border-left: 6px solid #d6e3ef;
border-bottom: 1px solid #d6e3ef;
padding: 2px;
}
.newcminfo {
font-size: 11px;
padding-bottom: 7px;
color: #606060;
line-height: 13px
}
.formfield {
color: black;
background-color: #edf2f8;
border:1px solid #bbb;
padding: 3px;
}
.formbutton {//表单按钮
color: black;
background: #edf2f8;
border:1px solid #bbb;
padding-top: 0px!important;
padding-bottom: 3px!important;
padding: 3px 2px 0px 2px;
height: 21px;
border-left: 4px solid #bbb;
}

.cal_day1 {//日历
font-size: 11px;
text-align: center;
}
.cal_day1 a {//日历
text-decoration: underline;
}
.cal_day1 a:hover {//日历
text-decoration: none;
}
.cal_day2 {//日历 今天的样式
font-size: 11px;
text-align: center;
border: 1px solid #999;
font-weight: bold;
}
.cal_day2 a {//日历 今天的链接样式
text-decoration: underline;
}
.cal_day2 a:hover {//日历 鼠标停留在今天的链接上时的样式
text-decoration: none;
}
.curdate {//日历 年月的样式
font-weight: bold;
font-size: 11px;
text-align: center;
padding-bottom: 10px;
}
.curdate a {//日历 年月的链接样式
text-decoration: none;
}
.curdate a:hover {//日历 鼠标停留在年月的链接上时的样式
text-decoration: underline;
}
.attach {//附件
padding: 10px 0px;
}
.attach-desc {//附件
background-color: #edf2f8;
padding: 5px;
border: 1px solid #000;
display: inline;
}
.content {//文章正文样式
clear: both;
display: block;
margin-right: auto;
margin-left: auto;
}
.tags {//标签的样式
padding: 10px 0px;
}
.pagelink {//翻页部分 普通页码样式
padding:1px 3px;
font-size:11px;
font-weight:normal;
border:1px solid #386792;
}
.pagelink a {//翻页部分 普通页码链接样式
color: #333399;
text-decoration: none;
}
.pagelink2 {//翻页部分 第一页 最后一页 上页 下页的样式
padding:1px 3px;
font-size:11px;
font-weight:bold;
border:1px solid #386792;
}
.pagelink2 a {//翻页部分 第一页 最后一页 上页 下页的链接样式
color: #333399;
text-decoration: none;
}
.pagelink3 {//翻页部分,Record:的样式
padding:1px 3px;
font-size:11px;
font-weight:normal;
border:1px solid #386792;
background-color:#edf2f8;
}
.pagecurrent {//翻页部分,当前页链接的样式,如果当前是第一页,那么1就为此样式
padding:1px 3px;
font-size:11px;
font-weight:bold;
color:#000;
background-color:#d6e3ef;
border:1px solid #386792;
}
.post {//文章整体样式
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.posttitle {//文章标题样式
text-indent: 8px;
border-left: thick solid #386792;
font-size: 14px;
font-weight: bold;
padding: 2px;
margin-top: 5px;
clear:both;
}
.posttitle a {//文章标题链接样式
color: #333399;
text-decoration: underline;
}
.posttitle a:hover{//鼠标停留在文章标题链接上时的样式
height: 70px!important;
background-color: #d6e3ef;
border-bottom: 1px solid #386792;
vertical-align: text-bottom;
}
#titlelogo {//博客名称 或者 logo 的样式
padding: 10px;
float: left;
}
#article-other {
text-align: center;
margin-bottom: 15px;
}
#tburl {
margin: 5px 0px 15px 0px;
}
#trackbacks {//引用部分的样式
margin: 5px 0px 15px 0px;
}
.tbcontent {
margin: 5px 0px 10px 0px;
}
.tbdate {
color: #777777;
font-size: 11px;
padding-top: 2px;
text-align: right;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #B3CBE1;
}
.cmcontent {//评论内容样式
margin: 5px 0px 15px 0px;
overflow:hidden;
display:block;
width:523px !important;
width /**/ :571px;
clear: both;
}
.cmdate {//评论日期样式
color: #777777;
font-size: 11px;
padding-top: 2px;
text-align: right;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #B3CBE1;
}
#message {//message.htm中消息的样式
margin-top: 100px;
background-color: #fff;
text-align:center;
width: 500px;
padding: 20px;
border: 1px dotted #386792;
margin-right: auto;
margin-left: auto;
}
.navlink {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的样式
float:right;
padding-bottom:5px;
font-family: "Tahoma", "sans-serif";
font-weight: bold;
margin-top: 50px;
}
.navlink a {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
padding-right:10px;
text-decoration: none;
}
.navlink a:hover {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
padding-right:10px;
text-decoration: underline;
}
#topmenu { //description + guestlink的整体样式
height: 18px!important;
background-color: #edf2f8;
border-bottom: 1px dotted #386792;
padding: 5px;
}
.week {//日历中 星期 一 二 三 四 无 六 日 的样式
padding: 3px;
font: 11px "Tahoma", "sans-serif";
background-color: #eee;
border-bottom: 2px solid #aaa;
text-align: center;
}
.keywordtd {
padding: 3px 10px;
border-bottom: 1px solid #ccc;
}
.listtd {
padding: 3px 0px;
border-bottom: 1px solid #ddd;
}
.listtd a {
text-decoration: none;
}
.listtd a:hover {
text-decoration: underline;
}
.phpcode {//这个是在添加文章时用的,用来显示php或者其他代码,要手动添加
border: 1px solid #b3cbe1;
border-left: 3px solid #b3cbe1;
background-color: #f8f8f8;
color: #000000;
margin: 5px;
padding: 5px;
}
.quote {
margin: 5px 0px;
padding: 5px;
border: 1px solid #000;
background-color: #edf2f8;
}
.divOFF {
display:none;
}
.divON {
display:block;
}
.attachttitle {//日志归档标题样式
font-weight: bold;
}
.attachicon {//日志归档
float: right;
}
.attachdesc {//日志归档
padding: 10px 0px;
}

先写这些吧,台湾地震之后博客访问就奇慢,又连不上了,有高手帮补充一下
未完待续

作者:maker

发表时间:2007.1.5