博客园博客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 /*公用*/
  2 body {
  3     font-size:15px;
  4     padding:0;
  5     margin:0;
  6     font-family:"微软雅黑","宋体",Arial;
  7     background:#205424 url(http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg) no-repeat top center fixed;
  8     min-width:1200px;
  9 }
 10 #home {
 11     opacity: 0.95;
 12     filter: alpha(opacity=95);
 13     box-shadow:0 0 10px #000;
 14     margin:40px auto;
 15     width:1200px;
 16     background:#fff;
 17     overflow:auto;
 18     border:solid 1px #fff;
 19 }
 20 /*段落*/
 21 .postBody p,.postCon p {
 22     margin:7px 0;
 23     line-height:24px;
 24 }
 25 h1 {
 26     margin:0;
 27 }
 28 h3 {
 29     font-size:15px;
 30     font-weight:bold;
 31 }
 32 /*超链接*/
 33 a {
 34     color:#464646;
 35     text-decoration:none;
 36 }
 37 a:hover {
 38     text-decoration:underline;
 39 }
 40 a:visited,a:hover {
 41     color:#464646;
 42 }
 43 ul {
 44     list-style:none;
 45     margin:0;
 46     padding:0;
 47 }
 48 image {
 49     border:none;
 50 }
 51 #header {
 52     padding:20px;
 53 }
 54 /*博客标题*/
 55 #blogTitle,#blogTitle a {
 56     font-weight:bold;
 57     color:#666;
 58 }
 59 #blogTitle .title {
 60     margin-top:10px;
 61     height:100px;
 62     line-height:100px;
 63     font-size:36px;
 64     padding-left:120px;
 65     background:#fff url(http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_light2.png) no-repeat;
 66 }
 67 .headermaintitle {
 68     }#blogTitle,#blogTitle a:hover {
 69     text-decoration:none;
 70 }
 71 /*子标题*/
 72 .subtitle {
 73     padding-left:30px;
 74     font-size:14px;
 75     color:#999;
 76     font-weight:normal;
 77     margin:10px 0;
 78 }
 79 /*导航栏*/
 80 #navigator {
 81     font-size:16px;
 82     height:48px;
 83     background:#55895B;
 84     text-align:center;
 85     margin-top:20px;
 86     margin-bottom:20px;
 87 }
 88 #navList li {
 89     margin:0;
 90     line-height:48px;
 91     display:inline-block;
 92     float:left;
 93 }
 94 #navList li:hover {
 95     background:#6DA47D;
 96 }
 97 #navList li a {
 98     padding:0 30px;
 99     text-decoration:none;
100     line-height:48px;
101     border:0;
102     color:#fff;
103     display:-moz-inline-box;
104     display:inline-block;
105 }
106 .blogStats {
107     height:48px;
108     color:#fff;
109     line-height:48px;
110 }
111 #main {
112     padding:20px;
113 }
114 /*左边*/
115 #sideBarMain {
116     padding:0 10px 0 0;
117     background:#fff;
118     margin:0 0 20px 0;
119     width:190px;
120     font-size:12px;
121     line-height:22px;
122 }
123 #sideBarMain a {
124     color:#666;
125 }
126 #leftcontentcontainer {
127     color:#666;
128 }
129 .newsItem {
130     color:#666;
131 }
132 /*公告*/
133 #profile_block {
134     margin-top:0px;
135     line-height:24px;
136     text-align:left;
137 }
138 /*主面板*/
139 #mainContent {
140     margin-top:0px;
141     padding-top:0px;
142     padding-right:0px;
143     background:#fff;
144     padding-bottom:0px;
145     float:right;
146     width:960px;
147     padding-left:0px;
148 }
149 /*每日文章列表*/
150 .day {
151     background:#fff;
152     padding:0;
153     margin:0 0 20px 0;
154 }
155 /*博客标题*/
156 .postTitle a {
157     color:#464646;
158 }
159 .postTitle {
160     padding-bottom:10px;
161     font-size:20px;
162     font-weight:bold;
163     color:#464646;
164     background:url(http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif) no-repeat 0 3px;
165     padding-left:30px;
166 }
167 .dayTitle {
168     display:none;
169 }
170 /*摘要*/
171 .c_b_p_desc {
172     padding:10px;
173     line-height:24px;
174     color:#888;
175 }
176 .c_b_p_desc a {
177     color:#888;
178 }
179 .c_b_p_desc a:hover {
180     text-decoration:none;
181     border-bottom-width:1px;
182     border-bottom-style:dotted;
183 }
184 /*右侧图片*/
185 .desc_img {
186     margin-left:10px;
187     border:solid 1px #fff;
188     box-shadow:0 0 10px #aaa;
189 }
190 /*博文页*/
191 #topics .post {
192     background:#fff;
193 }
194 .postCon {
195     padding:10px 20px 0 20px;
196 }
197 .postDesc {
198     margin:0 30px;
199     margin-bottom:2px;
200     padding:8px 0px;
201     font-size:12px;
202     color:#aaa;
203     background:#fff;
204     text-align:right;
205 }
206 .postDesc a {
207     color:#AAA;
208 }
209 .postBody {
210     padding:0;
211 }
212 /*google搜索框*/
213 #google_q,#q {
214     height:22px;
215     width:120px;
216     border:solid 1px #ccc;
217     box-shadow:inset 0 0 3px #ddd;
218     border-radius:4px;
219 }
220 /*搜索按钮*/
221 .btn_my_zzk {
222     font-family:Microsoft Yahei;
223     border:none;
224     height:26px;
225     width:60px;
226     padding:1px;
227     font-size:14px;
228     cursor:pointer;
229     position:relative;
230     vertical-align:middle;
231     display:inline-block;
232     background:#55895B;
233     border-radius:4px;
234     color:#fff;
235 }
236 .btn_my_zzk:hover {
237     background:#6DA47D;
238 }
239 /*评论按钮*/
240 
241 #btn_comment_submit {
242     border:none;
243     height:48px;
244     width:120px;
245 }
246 /*评论按钮*/
247 .comment_btn {
248     font-family:Microsoft Yahei;
249     border:none;
250     height:48px;
251     width:120px;
252     font-size:18px;
253     cursor:pointer;
254     position:relative;
255     vertical-align:middle;
256     display:inline-block;
257     background:#55895B;
258     color:#fff;
259 }
260 #btn_comment_submit:hover {
261     background:#6DA47D;
262 }
263 /*评论标题*/
264 .feedback_area_title {
265     padding:10px;
266     font-size:24px;
267     font-weight:bold;
268     color:#55895B;
269     border-bottom:solid 6px #55895B;
270 }
271 .feedbackListSubtitle {
272     font-size:12px;
273     color:#888;
274 }
275 .feedbackListSubtitle a {
276     color:#888;
277 }
278 .comment_quote {
279     background:#FCFAAC;
280     padding:15px;
281     border:1px solid #CCC;
282 }
283 #commentform_title {
284     color:#55895B;
285     background-image:none;
286     background-repeat:no-repeat;
287     margin-bottom:10px;
288     padding:10px 20px 10px 10px;
289     font-size:24px;
290     font-weight:bold;
291     border-bottom:solid 6px #55895B;
292 }
293 /*评论框*/
294 #comment_form {
295     margin:10px 0;
296     padding:0;
297 }
298 .commentform {
299     margin:10px 0;
300     padding:10px 20px;
301     background:#fff;
302 }
303 /*评论输入域*/
304 #tbCommentBody {
305     font-family:MIcrosoft Yahei;
306     margin-top:10px;
307     width:940px;
308     max-width:940px;
309     min-width:940px;
310     background:white;
311     color:#333;
312     border:2px solid #fff;
313     box-shadow:inset 0 0 8px #aaa;
314     padding:10px;
315     height:120px;
316     font-size:14px;
317     min-height:120px;
318 }
319 /*评论条目*/
320 .feedbackItem {
321     font-size:14px;
322     line-height:24px;
323     margin:10px 0;
324     padding:20px;
325     background:#F2F2F2;
326     box-shadow:0 0 5px #aaa;
327 }
328 .feedbackListSubtitle {
329     font-weight:normal;
330 }
331 /*分类页*/
332 .entrylist {
333     padding:10px 20px;
334     background:#fff;
335 }
336 .entrylistItem {
337     margin:10px 0;
338     padding:10px;
339 }
340 .entrylistPosttitle {
341     font-size:18px;
342     font-weight:bold;
343     background:url(http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_br229512.link(en-us,MSDN.10).gif) no-repeat 0 3px;
344     padding-left:30px;
345 }
346 .entrylistPostSummary {
347     padding:10px;
348 }
349 .entrylistItemPostDesc {
350     font-size:12px;
351     color:#999;
352     padding-left:40px;
353 }
354 /*尾部*/
355 #footer {
356     font-size:12px;
357     margin:20px;
358     padding:12px;
359     text-align:center;
360     background:#55895B;
361     color:#DDD;
362     font-size:14px;
363 }
364 /*文章内图片*/
365 #cnblogs_post_body p img {
366     margin:10px;
367 }
368 /*顶一下*/
369 .diggnum {
370     font-size:28px;
371     color:#6DA47D;
372     font-family:Microsoft Yahei;
373 }
374 #div_digg .diggnum {
375     line-height:100px;
376 }
377 .diggit {
378     float:left;
379     width:128px;
380     height:128px;
381     background:url(http://images.cnblogs.com/cnblogs_com/libaoheng/305804/o_dig.gif) no-repeat;
382     background-position:0 0;
383     text-align:center;
384     cursor:pointer;
385 }
386 .diggit:hover {
387     background-position:-128px 0;
388 }
389 /*踩一下(园友反映,这个有点“邪恶”,呵呵,其实是我没来得及设计这个背景图片,就暂时把它隐藏了……可以去掉这句话)*/
390 .buryit {
391     display:none;
392 }
393 .diggword {
394     display:none;
395 }
396 /*green_channel*/
397 #green_channel {
398     text:align:right;
399     background:#6DA47D;
400     padding-left:20px;
401     font-weight:normal;
402     font-size:15px;
403     width:920px;
404     border:none;
405     color:#fff;
406     padding:20px;
407     border-radius:4px;
408 }
409 /*最新评论*/
410 #myposts .PostList {
411     font-size:14px;
412     line-height:24px;
413     margin:10px 0;
414     padding:20px;
415     background:#F2F2F2;
416     box-shadow:0 0 5px #aaa;
417 }
418 #myposts .postTitl2 a {
419     color:#6DA47D;
420 }
页面css代码

 

技术分享
 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>
页首Html代码

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。