博客园博客css样式一

样式一     

1.页面定制css代码

博客背景可以在body{}中添加background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed;

 

  1 <style type="text/css">
  2     .Abstract
  3     {
  4         padding: 15px;
  5         border: dotted 2px #999;
  6         color: #999;
  7         font-family: 'Microsoft Yahei';
  8         border-radius: 4px;
  9     }
 10         
 11     .First
 12     {
 13         margin: 10px 0;
 14         font-family: 'Microsoft Yahei';
 15         text-align: left;
 16         padding: 6px 20px;
 17         color: #fff;
 18         background: #55895B;
 19         font-size: 20px;
 20         border-radius: 4px;
 21         clear: both;
 22     }
 23         
 24         
 25     .Second
 26     {
 27         margin: 10px 0;
 28         font-family: 'Microsoft Yahei';
 29         padding: 6px 20px;
 30         background: #93C8A2;
 31         color: #fff;
 32         font-size: 18px;
 33         border-radius: 4px;
 34         clear: both;
 35     }
 36         
 37         
 38     .Third
 39     {
 40         margin: 10px 0;
 41         padding: 6px 20px;
 42         font-family: 'Microsoft Yahei';
 43         margin: 15px 0;
 44         font-size: 16px;
 45         color: fff;
 46         background: #C6EFD2;
 47         color: #999;
 48         border-radius: 4px;
 49         clear: both;
 50     }
 51     .note
 52     {
 53         margin: 10px 0;
 54         padding: 15px 20px 15px 60px;
 55         background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_yellow-pin.png') no-repeat 20px 0;
 56         font-size: 15px;
 57         font-family: 'Microsoft Yahei';
 58         box-shadow: 0 0 8px #aaa;
 59         clear: both;
 60     }
 61         
 62     .demo
 63     {
 64         text-align: left;
 65         padding: 6px 20px;
 66         overflow: auto;
 67         border-radius: 4px;
 68         background: orange;
 69         color: #fff;
 70         font-size: 16px;
 71         clear: both;
 72     }
 73         
 74     .cnblogs_Highlighter
 75     {
 76         border: solid 1px #ccc;
 77         clear: both;
 78     }
 79         
 80     .cnblogs_code
 81     {
 82         background: #EFFFF4;
 83         border: solid 0px #939393;
 84         font-size: 14px;
 85         clear: both;
 86         padding: 10px 20px;
 87     }
 88     .cnblogs_code pre
 89     {
 90         font-size: 14px;
 91     }
 92     .cnblogs_code span
 93     {
 94         font-family: Courier New;
 95         font-size: 14px;
 96     }
 97 </style>
 98 =================================
 99 @charset "utf-8";
100 /* CSS Document */
101 
102 /**************************************************
103 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
104 如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是
105 你不能删除这些样式。
106 **************************************************/
107 #EntryTag {
108     margin-top: 20px;
109     font-size: 9pt;
110     color: gray;
111 }
112 .topicListFooter {
113     text-align: right;
114     margin-right: 10px;
115     margin-top: 10px;
116 }
117 #divRefreshComments{
118     text-align: right; 
119     margin-right: 10px;
120     margin-bottom: 5px;
121     font-size: 9pt;
122 }
123 /*****第一部分结束*******************************/
124 
125 /**************************************************
126 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
127 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
128 模板所有页面的变化。因为它们是全局的。
129 **************************************************/
130 * {
131     margin: 0;
132     padding: 0;
133 }
134 html {
135     height: 100%;
136 }
137 body {
138     color:#000;
139     background:#FFF;
140     font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
141     font-size: 14px;
142     min-height: 101%;
143     width:60em;
144     margin-left:auto;
145     margin-right:auto;
146 }
147 table {
148     border-collapse: collapse;
149     border-spacing: 0;
150 }
151 fieldset, img {
152     border: 0;
153 }
154 ul {
155     word-break: break-all;
156 }
157 li {
158     list-style: none;
159 }
160 h1, h2, h3, h4, h5, h6 {
161     font-size: 100%;
162     font-weight: normal;
163 }
164 a:link {
165     color: black;
166     text-decoration: none;
167 }
168 a:visited {
169     color: black;
170     text-decoration: none;
171 }
172 a:hover {
173     color: #F60;
174     background-color:#e9f3e8;
175     -moz-border-radius: 9px;
176     -khtml-border-radius: 9px;
177     -webkit-border-radius: 9px;
178     border-radius: 9px;
179 }
180 a:active {
181     color: black;
182     text-decoration: none;
183 }
184 .clear {
185     clear: both;
186 }
187 /*****第二部分结束*******************************/
188 
189 /**************************************************
190 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
191 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
192 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
193 **************************************************/
194 /*****home和头部开始**************************/
195 #home {
196     margin: 0 auto;
197     width:95%;
198     min-width: 60em;
199 }
200 #header {
201     padding-bottom: 0.4em;
202     margin-top: 0.8em;
203 }
204 #blogTitle {
205     height: 7em;
206     clear: both;
207     border:1px solid #999;
208     -moz-border-radius: 11px;
209     -khtml-border-radius: 11px;
210     -webkit-border-radius: 11px;
211     border-radius: 11px;
212     -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
213 }
214 #blogTitle h1 {
215     font-size: 200%;
216     font-weight: bold;
217     line-height: 2em;
218     margin-left: 1em;
219     margin-top: 0.4em;
220     width: 50%;
221     float: left;
222 }
223 #blogTitle h2 {
224     margin-left: 4em;
225     line-height: 1.5em;
226     width: 50%;
227     float: left;
228 }
229 #blogLogo {
230     float: right;
231 }
232 #navigator {
233 /*    background-color: black;
234     height: 30px;
235     clear: both;*/
236 
237     margin-top:0.3em;
238     height: 2em;
239     clear:both;
240     border:1px solid #999;
241     -moz-border-radius: 11px;
242     -khtml-border-radius: 11px;
243     -webkit-border-radius: 11px;
244     border-radius: 11px;
245     -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
246 }
247 #navList {
248     min-height: 1.5em;
249     float: left;
250 }
251 #navList li {
252     float: left;
253 }
254 #navList a {
255     display: block;
256     padding-left:0.5em;
257     padding-right:0.5em;
258     line-height:2em;
259     float: left;
260     text-align: center;
261     border-right: 1px solid #999;
262 }
263 #navList a:link, #navList a:visited, #navList a:active {
264 /*    color: #ccc;*/
265 }
266 #navList a:hover {
267 /*    color: white;
268     background-color: #F60;
269     text-decoration: none;*/
270     padding-left:0.8em;
271     padding-right:0.8em;
272 }
273 
274 .blogStats {
275     float: right;
276     font-size:0.8em;
277     color: #666;
278     margin-top: 0.9em;
279     margin-right: 0.2em;
280     text-align: right;
281 }
282 /*****home和头部结束**************************/
283 
284 /*****主页文章列表开始**************************/
285 #main{
286     width: 100%;
287     min-width: 60em;
288     text-align: left;
289 }
290 #mainContent .forFlow{
291     margin-left: 14em;
292     float: none; 
293     width: auto;
294 }
295 
296 #mainContent {
297     min-height: 18em;
298     padding: 0px 0px 10px 0;
299     *padding-top:10px;
300     -o-text-overflow: ellipsis;
301     text-overflow: ellipsis;
302     overflow: hidden;
303     word-break: break-all;
304     
305     float: right;
306     margin-left: -26em;
307     width: 100%
308 }
309 .day {
310     min-height: 10px;
311     _height: 10px;
312     margin-bottom: 20px;
313     padding-bottom: 5px;
314 }
315 .dayTitle {
316     width: 100%;
317     color: #666;
318 
319     font-weight: bold;
320     line-height: 1.5em;
321     font-size: 110%;
322     margin-top: 3px;
323     margin-bottom: 10px;
324     clear:both;
325     border-bottom: 2px solid #e9f3e8;
326     text-align:center;
327 
328 }
329 .postTitle {
330     font-size: 110%;
331     font-weight: bold;
332     /*border-bottom: 1px solid #9DAAF4;*/
333     float: right;
334     line-height: 1.5em;
335     width: 100%;
336     clear:both;
337 }
338 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
339     color: #444;
340 }
341 .postTitle a:hover {
342     color: #F60;
343     text-decoration: none;
344 }
345 .postCon {
346     float: right;
347     line-height: 1.5em;
348     width: 100%;
349     clear:both;
350     padding: 10px 0;
351 }
352 .postDesc {
353     float: right;
354     width: 100%;
355     clear:both;
356     text-align: right;
357     padding-right: 5px;
358     color: #666;
359     margin-top: 5px;
360 }
361 .postDesc a:link, .postDesc a:visited, .postDesc a:active {
362     color: #666;
363 }
364 .postDesc a:hover {
365     color: #F60;
366     text-decoration: none;
367 }
368 .postSeparator {
369     clear: both;
370     height: 1px;
371     border-top: 1px dotted #666;
372     width: 100%;
373     clear:both;
374     float: right;
375     margin: 0 auto 15px auto;
376 }
377 /*****主页文章列表开始**************************/
378 
379 /*****侧边栏开始********************************/
380 #sideBar {
381     width: 14em;
382     min-height: 14em;
383     padding: 0px 0 0px 5px;
384     float: left;
385     -o-text-overflow: ellipsis;
386     text-overflow: ellipsis;
387     overflow: hidden;
388     word-break: break-all;
389     font-size:0.9em;
390 }
391 .newsItem .catListTitle {
392     display: none;
393 }
394 .newsItem {
395     padding: 15px 0 5px 0px;
396     margin-bottom: 8px;
397 }
398 /**日历控件样式开始**/
399 #calendar {
400     width: 14em;
401 }
402 #calendar .Cal {
403     width: 100%;
404     line-height: 1.5em;
405 }
406 .Cal {/**日历容器table**/
407     border: none;
408     color: #666;
409 }
410 #calendar table a:link, #calendar table a:visited, #calendar table a:active {
411     font-weight: bold;
412 }
413 #calendar table a:hover {
414     color: white;
415     text-decoration: none;
416     background-color: #F60;
417 }
418 .CalTodayDay{/**今天日期样式**/
419     color:#f60;
420 }
421 #calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
422     font-weight: bold;
423     background-color: white;
424 }
425 .CalDayHeader{
426     border-bottom:1px solid #ccc;    
427 }
428 .CalTitle{/**日历年月头部样式**/
429     width:100%;
430     background:white;
431     color:black;
432     border-bottom:1px solid #666;    
433 }
434 /**日历控件样式结束**/
435 .catListTitle {
436     font-weight: bold;
437     line-height: 1.5em;
438     font-size: 110%;
439     margin-top: 15px;
440     margin-bottom: 10px;
441     border-bottom: 1px solid #e9f3e8;
442     text-align: center;
443 }
444 .catListComment {
445     line-height: 1.5em;
446 }
447 .divRecentComment {
448     color: #666;
449     margin-bottom:1em;
450 }
451 #sideBarMain ul {
452     line-height: 1.5em;
453 }
454 /*****侧边栏结束********************************/
455 
456 
457 /****查看文章页面开始*************************/
458 #topics {
459     width: 100%;
460     min-height: 18em;
461     padding: 0px 0px 10px 0;
462     float: left;
463     -o-text-overflow: ellipsis;
464     text-overflow: ellipsis;
465     overflow: hidden;
466     word-break: break-all;
467 }
468 #topics .postTitle {
469     font-size: 130%;
470     font-weight: bold;
471     border-bottom: 1px solid #999;
472     float: left;
473     line-height: 1.5em;
474     width: 100%;
475     padding-left: 5px;
476 }
477 .postBody {
478     padding: 5px 2px 5px 5px;
479     line-height: 1.5em;
480     color: #000;
481     border-bottom: 1px solid #8686FF;
482 }
483 #EntryTag {
484     color: #666;
485 }
486 #EntryTag a {
487     margin-left: 5px;
488 }
489 #EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
490     color: #666;
491 }
492 #EntryTag a:hover {
493     color: #f60;
494 }
495 #topics .postDesc {
496     float: right;
497     width: 100%;
498     font-size:0.9em;
499     text-align: right;
500     padding-right: 5px;
501     color: #666;
502     margin-top: 5px;
503 }
504 .feedback_area_title {
505     font-weight: bold;
506     margin-top: 20px;
507     border-bottom: 1px solid #8686FF;
508     margin-bottom: 10px;
509     padding-left: 8px;
510 }
511 .louzhu {
512 background:transparent url('images/icoLouZhu.gif') no-repeat scroll right top;
513 padding-right:16px;
514 }
515 .feedbackListSubtitle {
516     color: #666;
517     font-size:0.9em;
518 }
519 .feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
520     color: #666;
521     font-weight: normal;
522 }
523 .feedbackListSubtitle a:hover {
524     color: #f60;
525     text-decoration: none;
526 }
527 .feedbackManage {
528     width: 160px;
529     text-align: right;
530     float: right;
531 }
532 .feedbackCon {
533     border-bottom: 1px solid #ccc;
534     background: url('images/comment.gif') no-repeat 5px 0px;
535     padding: 15px 18px 10px 40px;
536     min-height: 35px;
537     _height: 35px;
538     margin-bottom: 1em;
539     line-height: 1.5em;
540     width:100%;
541 }
542 #divRefreshComments {
543     text-align: right;
544     margin-bottom: 10px;
545 }
546 .commenttb {
547     width: 320px;
548 }
549 /****查看文章页面开始************************
550 
551 /****列表页面开始******************************/
552 .entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
553     font-size: 110%;
554     font-weight: bold;
555     border-bottom: 1px solid #8686FF;
556     text-align: right;
557     padding-bottom: 3px;
558     padding-right: 10px;
559 }
560 
561 .entrylistDescription {
562     color: #666;
563     text-align: right;
564     padding-top: 5px;
565     padding-bottom: 5px;
566     padding-right: 10px;
567     margin-bottom: 10px;
568 }
569 .entrylistItem {
570     min-height: 20px;
571     _height: 20px;
572     margin-bottom: 30px;
573     padding-bottom: 5px;
574     width: 100%;
575 }
576 .entrylistPosttitle {
577     font-size: 110%;
578     font-weight: bold;
579     border-bottom: 1px solid #666;
580     line-height: 1.5em;
581     width: 100%;
582     padding-left: 5px;
583 }
584 .entrylistPosttitle a:hover {
585     text-decoration: none;
586 }
587 .entrylistPostSummary {
588     margin-top: 5px;
589     padding-left: 5px;
590     margin-bottom: 5px;
591 }
592 .entrylistItemPostDesc {
593     text-align: right;
594     color: #666;
595 }
596 .entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
597     color: #666;
598 }
599 .entrylistItemPostDesc a:hover {
600     color: #f60;
601 }
602 .entrylist .postSeparator {
603     clear: both;
604     width: 100%;
605     font-size: 0;
606     line-height: 0;
607     margin: 0;
608     padding: 0;
609     height: 0;
610     border: none;
611 }
612 
613 .pager {
614     text-align: right;
615     margin-right: 10px;
616 }
617 .PostList {
618     border-bottom: 1px solid #ccc;
619     clear: both;
620     min-height: 1.5em;
621     _height: 1.5em;
622     padding-top: 10px;
623     padding-left: 5px;
624     padding-right: 5px;
625     margin-bottom: 5px;
626 }
627 .postTitl2 {
628     float: left;
629     font-size:0.9em;
630     color: #666;
631 }
632 .postDesc2 {
633     color: #666;
634     float: right;
635     margin-right: ;
636     font-size:0.9em;
637 }
638 .postText2 {
639     clear: both;
640     
641 }
642 .pfl_feedback_area_title {
643     text-align: right;
644     line-height: 1.5em;
645     font-weight: bold;
646     border-bottom: 1px solid #666;
647     margin-bottom: 10px;
648 }
649 .pfl_feedbackItem {
650     border-bottom: 1px solid black;
651     margin-bottom: 20px;
652 }
653 .pfl_feedbacksubtitle {
654     width: 100%;
655     border-bottom: 1px dotted #666;
656     height: 1.5em;
657 }
658 .pfl_feedbackname {
659     float: left;
660 }
661 .pfl_feedbackManage {
662     float: right;
663 }
664 .pfl_feedbackCon {
665     color: black;
666     padding-top: 5px;
667     padding-bottom: 5px;
668 }
669 .pfl_feedbackAnswer {
670     color: #F40;
671     text-indent: 2em;
672 }
673 .tdSentMessage {
674     text-align: right;
675 }
676 .errorMessage {
677     width: 300px;
678     float: left;
679 }
680 
681 /****列表页面结束******************************/*/
682 /****相册页面开始******************************/
683 .divPhoto {
684     border: 1px solid #ccc;
685     padding: 2px;
686     margin-right: 10px;
687 }
688 
689 .thumbDescription {
690     color: #666;
691     text-align: right;
692     padding-top: 5px;
693     padding-bottom: 5px;
694     padding-right: 10px;
695     margin-bottom: 10px;
696 }
697 /****相册页面开始******************************/
698 
699 
700 /*****留言页面开始*****************************/
701 #footer {
702     text-align: center;
703     min-height: 15px;
704     _height: 15px;
705     border-top: 1px solid black;
706     margin-top: 10px;
707     padding-top: 10px;
708     margin-bottom: 10px;
709 }
710 /*留言查看页面的个人信息*/
711 .personInfo {
712     margin-bottom: 20px;
713 }
714 /*留言分页区域*/
715 .pages {
716     text-align: right;
717 }
718 /*****留言页面结束*****************************/
719 /*****第三部分结束*******************************/
720 
721 /**************************************************
722 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
723 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
724 的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
725 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
726 并不能保证所有的文章都适合。
727 **************************************************/
728 /*文章内部常用标签格式*/
729 .postBody {
730     line-height: 1.5em;
731 }
732 .postBody p,.postCon  p{
733     text-indent: 2em;
734     margin: 0 auto 1em auto;
735 }
736 .postBody h2{
737     font-size: 150%;
738     margin: 15px auto 2px auto;
739     font-weight:bold;
740 }
741 .postBody h3 {
742     font-size: 120%;
743     margin: 15px auto 2px auto;
744     font-weight:bold;
745 }
746 .postBody h4{
747     font-size:110%;
748     margin:15px auto 2px auto;
749     font-weight:bold;
750     color:#333;
751 }
752 
753 .postBody h5{
754     font-size:100%;
755     margin:15px auto 2px auto;
756     font-weight:bold;
757     color:#333;
758 }
759 
760 .postBody a:link,.postBody a:visited,.postBody a:active{
761     text-decoration:underline;
762 }
763 .postCon a:link,.postCon a:visited,.postCon a:active{
764     text-decoration:underline;
765 }
766 .postBody ul,.postCon ul{
767     margin-left:2em;    
768 }
769 
770 .postBody li,.postCon li{
771     list-style-type:disc;
772     margin-bottom:1em;
773 }
774 
775 .postBody blockquote{
776     background:url('images/comment.gif') no-repeat 25px 0px;
777     padding:10px 60px 5px 60px;
778     min-height:35px;
779     _height:35px;
780     line-height:1.6em;
781     color:#333;
782 }
783 /*****第四部分结束*******************************/
页面定制css代码

 

posted @ 2015-02-05 23:54  民兵小队长  阅读(369)  评论(0)  编辑  收藏  举报