做博皮
昨天申请了这个博客,看见那么多漂亮的模板,心想自己也得做个。
可惜钻研了半天,只做出了现在这个模样,测试了ff,ie6,ie7都没什么问题。
本来,我想更改XHTML文档,但好像还得上传给工作人员,让他们修改。毕竟这要改一点后台程序嘛。麻烦。
鉴于此,就只能找些布局固定的模板,然后根据他的XHTML写下css了,我是找的Kubrick这个模板,把css禁用掉,改成自己的即可。
自己写css挺乱的,又是更改别人的,更乱。以后还得朝标准化前进。有想要更改模板的,请先换成Kubrick模板,再复制这个css就能换了。
很爽的是把单个文章页面的一些杂七杂八的新闻什么的都去掉了。
另外如何添加背景图片呢,我是上传到相册,复制图片地址。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 body
2 {
3 background-color:black;
4 color:white;
5 font-size:12px;
6 font-family:Verdana, Arial, Sans-Serif,'Lucida Grande';
7 margin:0 auto;
8 width:800px;
9 }
10 .cnblogs_code{
11 padding-left:10px;
12 }
13
14 #form1 {
15 /*text-align:left;
16 display:block;
17 margin:0;
18 padding:0;
19 background:none no-repeat bottom center !important;
20 background:no-repeat bottom center url(images/o_kubrickfooter.jpg);
21 width:960;
22 height:100%;*/
23 }
24
25 #wrapper{width:800px;margin:0 auto; padding:0px; overflow:hidden;}
26
27 a:visited,
28 a:active,
29 a:link {
30 color:#0066FF;
31 text-decoration:none;
32 }
33 a:hover {
34 color:#88BBFF;
35 text-decoration:none;
36 }
37
38 #header {
39 color:#fff;
40 background: url(http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_logo.gif) no-repeat;
41 width:800px;
42 height:129px;
43 }
44 #comments{
45 padding-left:10px;
46 }
47 .clear{
48 clear:both;
49 }
50 #header a {
51 color:white;
52 }
53
54 h1
55 {
56 height:20px;
57 margin : 0px;
58 padding-bottom: 30px;
59 font-family: "Courier New", Verdana, monospace;
60 text-align:center;
61 font-size:40px;
62 padding-top:10px;
63 }
64
65 #tagline
66 {
67 }
68
69 h1 a:visited,
70 h1 a:active,
71 h1 a:link {
72 text-decoration:none;
73 color:#0066FF;
74 font-family:Times New Roman, monospace;
75 }
76
77 h1 a:hover {
78 color:Silver;
79 text-decoration:none;
80 }
81
82 p.date img {
83
84 }
85
86 p.date
87 {
88 color: white;
89 width:648px;
90 font-size:20px;
91 height:50px;
92 line-height:50px;
93 text-indent:20px;
94 background-color:#152B43;
95 font-weight: bold;
96 margin:0px;
97 }
98
99 .post {
100 padding-left:10px;
101 padding-right: 10px;
102 line-height:150%;
103 background:url(http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_gradient.gif) no-repeat;
104 color:#555555;
105 background-color:white;
106 }
107
108 .postTitle {
109 color: white;
110 height:26px;
111 width:648px;
112 line-height:22px;
113
114 font-weight: bold;
115 }
116 .postTitle a,
117 .postTitle a:visited,
118 .postTitle a:active,
119 .postTitle a:link
120 {
121 color:white;
122 }
123 .postTitle a:hover{
124 color:#555555;
125 text-decoration:none;
126 }
127
128 .post h2 a,
129 .post h2 a:visited,
130 .post h2 a:active,
131 .post h2 a:link
132 {
133 color:white;
134 }
135 .post h2 a:hover{
136 color:#0066FF;
137 }
138 .post p{
139 }
140 .post h5{
141 margin-bottom:5px;
142 }
143 .post h5 a,
144 .post h5 a:visited,
145 .post h5 a:active,
146 .post h5 a:link
147 {
148 color:white;
149 }
150 .post h5 a:hover{
151 color:#0066FF;
152 }
153
154 .postText {
155 font-size: 10pt;
156 line-height:150%;
157 padding-left:5px;
158 }
159
160 .postFoot,p.postFoot
161 {
162 margin:0px;
163 color : #999;
164 text-align: right;
165 font-size: 9pt;
166 }
167
168
169 h5
170 {
171 margin: 0px;
172 padding: 0px;
173 }
174
175
176
177 blockquote {
178 font-style : italic;
179 }
180
181 p.postfoot {
182 font-size : 0.9em;
183 color:#555;
184 }
185
186 #main
187 {
188 margin:0px;
189 padding:0px;
190 display:block;
191 width:648px;
192 float:left;
193 text-align:left;
194 border-right:1px solid #000000;
195 background-color:#152B43;
196 padding-bottom:27252px;
197 margin-bottom:-27252px;
198 overflow:hidden;
199 }
200 #main h2{
201 padding-top:2px;
202 padding-left:10px;
203 font-size:18px;
204 }
205 .c_ad_block{
206 display:none;
207 }
208 .commentform{
209 margin-left:10px;
210 padding-left:10px;
211 }
212 .ad_commentbox_up{
213 display:none;
214 }
215 .post h2{
216 margin-top:0px;
217 }
218
219 #rightmenu {
220 margin:0px;
221 padding:0px;
222 display:block;
223 float:left;
224 text-align:left;
225 font-size:9pt;
226 width:151px;
227 overflow:hidden;
228 background-color:#445060;
229 padding-bottom:27252px;
230 margin-bottom:-27252px;
231 }
232
233 /*#rightmenu h3 {
234
235 background-color: transparent;
236 border: none;
237 border-bottom: 1px dotted #D6D6D6;
238 color: #000000;
239 font-size: 10pt;
240 margin: 10px 0px 0px 0px;
241 padding: 2px 5px;
242 }
243
244 #rightmenu ul {
245 list-style : none;
246 margin : 0px;
247 padding : 5px;
248 border : 0px solid #69A;
249 }
250
251 #rightmenu li {
252 padding-bottom:3px;
253 }*/
254
255 #rightmenu h3 {
256 margin:0px;
257 height:26px;
258 width:150px;
259 background:url(http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_menu.gif) no-repeat;
260 text-align:center;
261 line-height:26px;
262 color:white;
263 }
264 .div_my_zzk{
265 margin-left:5px;
266 }
267 .input_my_zzk{
268 width:80px;
269 }
270 .btn_my_zzk{
271 width:50px;
272 }
273
274 #rightmenu ul {
275 border:none;
276 list-style:none;
277 margin:0;
278 padding:5px;
279 font-size:9pt;
280 padding-top:0px;
281 }
282
283 #rightmenu li {
284 font-size:9pt;
285 padding-top:0px;
286 padding-bottom:5px;
287 padding-right:5px;
288 color:white;
289 }
290 #rightmenu li a,
291 #rightmenu li a:visited,
292 #rightmenu li a:active,
293 #rightmenu li a:link
294 {
295 color:white;
296 }
297 #rightmenu li a:hover{
298 color:#0066FF;
299 }
300
301 #footer {
302 text-align : center;
303 line-height:40px;
304 height:40px;
305 width:800px;
306 background-color:white;
307 background:url(http://images.cnblogs.com/cnblogs_com/prettydragoon/246346/o_bot.gif) no-repeat;
308
309 }
310 input.text {
311 width : 300px;
312 }
313
314 textarea {
315 width : 300px;
316 height : 200px;
317 }
318
319 #comments {
320 color:#888;
321 padding-left:10;
322 padding-right:40;
323 font-size:10pt;
324 }
325
326 #comments h4 span {
327 color : #999;
328 }
329
330 #comments h4 {
331 margin : 0px;
332 font-size : 0.9em;
333 }
334
335 p {
336 margin : 10px 0px;
337 }
338
339 h3 {
340 font-size : 1.2em;
341 border-bottom : 1px solid #AAA;
342 }
343
344 h3 {
345 font-size: 10pt;
346 border-bottom: 1px dotted #D6D6D6;
347 color: #000000;
348 background-color: transparent;
349 }
350
351 #relatedlinks ul {
352 list-style : none;
353 margin-left : 10px;
354 padding : 0px;
355 }
356
357 .Cal
358 {
359 border : 1px dotted #D6D6D6;
360 width:90%;
361 font-family:Arial;
362 font-size: 12px;
363 margin-top:10px;
364 height:150px;
365
366 }
367
368 .CalTitle
369 {
370 background-color :#FFF;
371 border-color:#ADF;
372 font-family:Arial;
373 font-size: 13px;
374 color : #06A;
375 border-bottom: 1px dotted #D6D6D6;
376 margin-left : 0px;
377 padding : 0px;
378 height:100%;
379 }
380
381 .CalOtherMonthDay
382 {
383 color:#808080;
384
385 }
386
387 .CalSelector
388 {
389
390 }
391
392 .CalNextPrev
393 {
394
395 }
396
397 .CalDayHeader
398 {
399
400 }
401
402 .CalSelectedDay
403 {
404
405 }
406
407 .CalWeekendDay
408 {
409
410 }
411 .CalTodayDay
412 {
413 color : red;
414 }
415
416 div.commentform {
417 color: #888;
418 padding-left: 0px;
419 padding-right: 40px;
420 font-size: 10pt;
421 }
422
423 #relatedlinks ul {
424 list-style: none;
425 margin-left: 10px;
426 padding: 0px;
427 }
428
429 #blogtopad
430 {
431 position:absolute;
432 top:5px;
433 left:240px;
434 float:left;
435 }
436
437
438 h3 {
439 font-size:10pt;
440 border-bottom:0px dotted #D6D6D6;
441 color:#000000;
442 background-color:transparent;
443 }
444
445
446 blockquote {
447 background-color:transparent;
448 border:1px solid #F4F4F4;
449 color:#5B5B5B;
450 font-size:10pt;
451 font-style:normal;
452 line-height:150%;
453 padding:0 11px 0 11px;
454 }
455 .dateTitle {
456 border:0;
457 color:#000000;
458 font-size:13pt;
459 font-weight:bold;
460 padding:0;
461 margin:0;
462 }
463
464 p.date img {
465 vertical-align:middle;
466 }
467 input,label {
468 color:Gray;
469 font-family:Verdana;
470 font-size:10pt;
471 }
472 input.text {
473 width:381px;
474 }
475 li {
476 font-size:10pt;
477 font-style:normal;
478 }
479 span.highlight {
480 background-color:transparent;
481 }
482 td {
483 font-size:10pt;
484 }
485 textarea {
486 color:#000000;
487 font-size:10pt;
488 height:200;
489 width:300;
490 }
491 .catListTitle{
492 height:26px;
493 line-height:26px;
494 }
495 .catListTitle a{
496 display:none;
497 }
498
499
500 #relatedlinks ul {
501 list-style:none;
502 margin-left:10;
503 padding:0;
504 }
505 .topicListFooter{
506 display:none;
507 }
508
509 code {
510 font-family:"Courier New", Courier, monospace;
511 font-size:10pt;
512 }
513 .listitem {
514 border-bottom:1px dotted #E4E4E4;
515 padding-bottom:3px;
516 padding-top:3px;
517 }
518
519
posted on 2010-05-19 19:50 kingQueenyun 阅读(338) 评论(0) 编辑 收藏 举报