Nice ，博客园的CSS 花了半天多终于弄完了

直接把模板禁用了，不然一堆问题。

CSS还有很多要学的，可能很多不完善的地方。

  1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
  2     margin: 0;
  3     padding:0;
  4 }
  5 body{
  6     width: 1200px;
  7     margin: 0 auto;
  8     color: #666;
  9     background-color: rgb(250, 250, 250);
 10     font-family: "consolas","微软雅黑",sans-serif;
 11 }
 12 *::selection{
 13     background-color: rgb(214,236,254);
 14 }
 15 ul{
 16     list-style: none;
 17 }
 18 .clear{
 19     clear:both;
 20 }
 21 #lnkBlogLogo{
 22     display: none;
 23 }
 24 #home{
 25     margin: 30px 0 30px 0;
 26     padding: 40px;
 27     background-color:rgba(232,232, 232, 0.5);
 28     border-radius: 5px;
 29     box-shadow: 0 0 10px 0 rgba(218, 218, 218, 0.397);
 30 }
 31 #main{
 32     background-color:rgba(232,232, 232, 0);
 33 }
 34 /*【导航】 [start]*/
 35 #header{
 36     height: 104px;
 37     background-color:rgba(232,232, 232, 0);
 38     border-radius: 5px;
 39 }
 40 #blogTitle{
 41     margin-top: 10px;
 42     height: 60px;
 43     border-radius: 5px;
 44 }
 45 #blogTitle h1{
 46     margin: 8px 0 0 20px;
 47 }
 48 #blogTitle .headermaintitle{
 49     color: #888;
 50     letter-spacing: 1px;
 51 }
 52 #blogTitle .headermaintitle:hover{
 53     color: rgb(74, 82, 109);
 54
 55 }
 56 #navigator{
 57     height: 50px;
 58     background-color: rgba(240, 240, 240, 0.5);
 59     border-radius: 5px;
 60     box-shadow: 0 0 6px 0 #ddd;
 61 }
 62 #navList li{
 63     float: left;
 64     margin: 13px 0 0 40px;
 65 }
 66 #navList li:nth-child(1){
 67     margin-left: 20px;
 68 }
 69 #navList li a{
 70     color: rgb(63, 125, 187);
 71     text-decoration: none;
 72     font-size: 18px;
 73     font-weight: bold;
 74 }
 75 #navList li a:hover{
 76     color: #369;
 77 }
 78 #header .blogStats{
 79     float: right;
 80     margin: 15px 10px 0 0;
 81     color: #369;
 82     font-size: 17px;
 83 }
 84 /*【导航】 [end]*/
 85
 86 #mainContent{
 87     background-color: rgb(252,252,252);
 88     border-radius: 5px;
 89     width: 840px;
 90     float: left;
 91     margin-top: 20px;
 92     padding: 10px;
 93     box-sizing: border-box;
 94     box-shadow: 0 0 6px 0 #ddd;
 95 }
 96
 97 /*【右侧栏】 [start]*/
 98
 99 /**/
100 #blog-calendar .CalTitle{
101     margin-left: 25px;
102 }
103 #blog-calendar .CalTitle a{
104     color: #666;
105     text-decoration: none;
106     font-size: 20px;
107     font-weight: bold;
108     padding: 3px 5px 3px 5px;
109 }
110 #blog-calendar .CalTitle a:hover{
111     background-color: #eee;
112 }
113 #blog-calendar td{
114     width: 30px;
115     height: 25px;
116 }
117 #blog-calendar .CalTitle td:nth-child(2){
118     width: 100px;
119 }
120 #blog-calendar .CalTodayDay{
121     background-color: rgb(201, 201, 201);
122 }
123 #blog-calendar .CalTodayDay a{
124     color: rgb(250, 250, 250);
125     text-decoration: none;
126 }
127 #blog-calendar .CalTodayDay u{
128     text-decoration: none;
129 }
130 /**/
131
132 #sideBar{
133     width: 260px;
134     float: right;
135     border-radius: 5px;
136     box-sizing: border-box;
137     margin-top: 20px;
138     background-color:rgba(232,232, 232, 0);
139     border-radius: 5px;
140 }
141 .catListTitle{
142     color: rgb(36, 114, 192);
143     padding: 6px;
144     text-indent: 5px;
145     background-color:rgba(232,232, 232, 0.5);
146     border-bottom: 1.2px dashed #ccc;
147     letter-spacing: 3px;
148
149 }
150 .newsItem .catListTitle{
151     margin: 0;
152 }
153 #profile_block{
154     margin-left: 20px;
155 }
156 #profile_block a{
157     text-decoration: none;
158     color: #369;
159     font-size: 16px;
160     padding: 4px 8px 4px 8px;
161     border-radius: 3px;
162     display: inline-block;
163 }
164 #profile_block a:hover{
165     background-color: rgb(236, 236, 236);
166 }
167 .newsItem{
168     border-bottom: 1.2px dashed #ccc;
169     padding-bottom: 6px;
170     box-shadow: 0 0 6px 0 #ddd;
171 }
172 #blog-calendar{
173     padding: 10px 20px 10px 20px;
174     box-shadow: 0 0 6px 0 #ddd;
175 }
176 .mySearch{
177     margin-top: 30px;
178     box-shadow: 0 0 6px 0 #ddd;
179     padding-bottom: 10px;
180 }
181 #sidebar_shortcut{
182     margin-top: 30px;
183     box-shadow: 0 0 6px 0 #ddd;
184     padding-bottom: 10px;
185 }
186 #sidebar_recentposts {
187     margin-top: 30px;
188     box-shadow: 0 0 6px 0 #ddd;
189     padding-bottom: 1px;
190 }
191 #sidebar_recentposts ul{
192      margin: 10px;
193 }
194 #sidebar_recentposts li a{
195     text-decoration: none;
196     color: #369;
197     font-size: 16.5px;
198     padding: 4px 8px 4px 8px;
199     border-radius: 3px;
200     display: block;
201 }
202 #sidebar_recentposts li a:hover{
203     background-color: rgb(236, 236, 236);
204 }
205
206 #sidebar_toptags {
207     margin-top: 30px;
208     box-shadow: 0 0 6px 0 #ddd;
209     padding-bottom: 10px;
210 }
211
212 #sidebar_postarchive{
213     margin-top: 30px;
214     box-shadow: 0 0 6px 0 #ddd;
215     padding-bottom: 10px;
216     background-color: rgb(252, 252, 252);
217 }
218 #sidebar_postarchive ul{
219     margin: 10px;
220 }
221 #sidebar_postarchive li a{
222    text-decoration: none;
223    color: #369;
224    font-size: 16.5px;
225    padding: 4px 8px 4px 8px;
226    border-radius: 3px;
227    display: block;
228 }
229 #sidebar_postarchive a:hover{
230     background-color: rgb(236, 236, 236);
231 }
232
233
234
235
236
237 #sidebar_scorerank {
238     margin-top: 30px;
239     box-shadow: 0 0 6px 0 #ddd;
240 }
241 #sidebar_scorerank,#sidebar_search,#sidebar_toptags,#sidebar_recentposts,#sidebar_shortcut,#blog-calendar,.newsItem{
242     background-color:rgb(252, 252, 252);
243 }
244
245 #sidebar_search_box .input_my_zzk{
246     outline: none;
247     width: 150px;
248     height: 25px;
249     border: 1.1px solid #ccc;
250     margin: 10px 0 0 10px;
251     border-radius: 3px;
252 }
253 #sidebar_search_box .input_my_zzk:focus{
254     border-color: rgb(126, 185, 253);
255 }
256 #sidebar_search_box .btn_my_zzk{
257     outline: none;
258     border: none;
259     background-color: rgb(59, 142, 236);
260     color: #fff;
261     letter-spacing: 2px;
262     border-radius: 2px;
263     height: 28px;
264     line-height: 31px;
265     position: relative;
266     top: 1.3px;
267     text-align: center;
268     width: 83px;
269     font-size: 16px;
270     box-shadow: 1px 1px 0.5px 0 #aaa;
271     cursor: pointer;
272 }
273 #sidebar_search_box .btn_my_zzk:active{
274     background-color: rgb(30, 125, 233);
275 }
276
277
278 .catListLink li{
279     margin: 10px 0 0 27px;
280     display: inline-block;
281 }
282 .catListLink li a{
283     text-decoration: none;
284     color: #369;
285     font-size: 16.5px;
286     padding: 4px 8px 4px 8px;
287     border-radius: 3px;
288 }
289 .catListLink li a:hover{
290     background-color: rgb(236, 236, 236);
291 }
292 .catListTag ul{
293     margin: 10px;
294     border-radius: 5px;
295 }
296 .catListTag li{
297     margin: 0;
298 }
299 .catListTag li::before{
300     content: "?";
301     color: #333;
302
303 }
304 .catListTag li a{
305     text-decoration: none;
306     color: #369;
307     font-size: 16.5px;
308     padding: 4px 8px 4px 8px;
309     border-radius: 3px;
310     display: inline-block;
311 }
312 .catListTag  li:hover{
313     background-color: rgb(236, 236, 236);
314 }
315 .catListBlogRank{
316     padding-bottom: 6px;
317 }
318 .catListBlogRank li{
319     margin: 6px 0 0 20px;
320 }
321 /*【右侧栏】 [end]*/
322
323
324
325
326
327
328 /*【主体】 [start]*/
329 .dayTitle{
330     padding-bottom: 10px;
331     border-bottom: 2px solid #ccc;
332     margin: 20px 0 20px 0;
333     font-weight: bold;
334     font-size: 25px;
335 }
336 .dayTitle a{
337     color: #369;
338     text-decoration: none;
339
340 }
341 .postTitle{
342     margin-bottom: 6px;
343     font-weight: bold;
344     font-size: 20px;
345 }
346 .postTitle::before{
347     content: "#";
348     font-size: 30px;
349     font-style: italic;
350     color: rgb(34, 144, 253);
351     position: relative;
352
353 }
354 .postTitle a{
355     color: rgb(36, 114, 192);
356     text-decoration: none;
357 }
358 .postCon{
359     padding: 8px;
360     color: #666;
361     box-shadow: 0 0 5px 0 #ddd;
362     background-color: rgb(242, 242, 242);
363     border-radius: 3px;
364 }
365
366 .postDesc{
367     margin-bottom: 20px;
368     color: #999;
369     font-size: 17px;
370 }
371 .postDesc a,.postCon a{
372     font-size: 17px;
373     color: rgb(1, 179, 179);
374     text-decoration: none;
375     margin-left: 3px;
376 }
377 .postDesc a:hover,.postCon a:hover{
378     color: rgb(3, 145, 145);
379     text-decoration: underline;
380 }
381
382
383 /*【pager】*/
384 #homepage_top_pager{
385     display: none;
386 }
387 #mainContent > div > div:nth-child(7){
388     display: none;
389 }
390 .topicListFooter{
391     position: relative;
392     left: 243px;
393     width: 563px;
394     background-color: #eee;
395     border-radius:5px;
396     padding: 5px 0 5px 10px;
397 }
398 .topicListFooter a{
399     color: #666;
400     text-decoration: none;
401     background-color: #ddd;
402     display: inline-block;
403     padding: 3px 8px 3px 8px;
404     border-radius: 4px;
405
406
407 }
408
409 /**/

原文地址：https://www.cnblogs.com/bin21st/p/9699855.html

时间： 2024-10-31 03:36:13

Nice ，博客园的CSS 花了半天多终于弄完了的相关文章

博客园自定义CSS样式设置

关于博客园自定义CSS样式设置 关于博客园自定义CSS样式设置 首先,选择一个博客皮肤模板,如下 然后,F12审查元素,可对右侧的元素规则进行自定义更改,然后覆盖原CSS 譬如看看取消掉自定义背景图片是什么样子,同理也可以添加CSS样式代码 如此修改完后,就可在页面定制CSS代码框中填上你所需要修改的代码 下面是我的页面定制CSS代码: 1.html,body{2. color: #807C7C;3. font-family: "Helvetica Neue",Helvetica,Ar

小书匠到博客园的 CSS 留存

// 小书匠到博客园的 CSS 留存 h1, h2, h3, h4, p, li { font-family: 'mononoki', "Consolas", "Couriew New";  }  .xiaoshujiang_code, code {  font-family: 'mononoki', "Andale Mono", "Source Code Pro";  }  h1, h2, h3, h4, h5, h6 { 

博客园自定义CSS美化 屏蔽广告等

通过自定义CSS,实现在博客园屏蔽广告.美化排版等. 需要禁用模板CSS 1 body{ 2 background: url(http://images.cnblogs.com/cnblogs_com/storyicon/1107385/o_Z.jpg); 3 font-family: "Hiragino Sans GB","Microsoft YaHei",\5FAE\8F6F\96C5\9ED1,tahoma,arial,simsun,\5B8B\4F53; 4

自定义博客园模板/css/html/js

唔....实在是找不到什么别的事情好干了,省选凉凉回去学文化课真的说实话很无聊...而且导致现在OI做题并没有什么目的性和系统性...还不如去做物理... 可能有对我博客样式感兴趣的朋友...我这里省去你们F12的时间来介绍一下我的博客模板吧... 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯,连接在这,可以自己去看:博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级). 这里着重感谢学姐帮我指导和完善了博客的样式. 看完了上面的应该就已经有了

第一篇、自定义博客园的css样式并让其支持响应式

css文件: <style type="text/css"> #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 16px; } #cnblogs_post_body h1 { background: #2B6695; border-radius: 6px

博客园Skin CSS代码 Version 3.0

/* Minification failed. Returning unminified contents. (187,73): run-time error CSS1036: Expected expression, found '#' */ body { background-color: #F5F5F5; } .clear { clear: both; } html { color: #000; overflow-y: scroll; background: #fff; } body, h

博客园Skin CSS代码

/* Minification failed. Returning unminified contents. (187,73): run-time error CSS1036: Expected expression, found '#' */ body { background:url('http://images.cnblogs.com/cnblogs_com/litao0505/806357/o_bg.jpg') top center fixed; background-repeat: r

博客园自定义css

body { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important; } body, button, i

我的博客园CSS样式分享

过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了. 先分享一下我的博客园的CSS吧. 我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的. 使用的是LessIsMore皮肤 下面是自定义的CSS样式 @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体&quo