博客美化之“黑白风”

前言

最近看到了博主 twobin 的一篇美化博客的文章，看完之后手心直痒痒，也想动手对自己的博客开开刀。说干就干...

下面是手术时间。

准备工作

看完博文了解到要对头部、导航栏、左侧边栏、右侧博文列表、底部、博文内容部分及博文评论进行开刀。有了先前的博文做对照，简单多了。

初始化模板

选择博客园中的一个模板作为初始化模板，步骤：进入我的博客-->管理-->设置-->博客模板，在下拉框中找到“LessIsMore”并选择，如下图所示：

点击保存，接下来的所有步骤都在这个设置页进行。

优化头部

将模板的头部替换成自己编写的html。

在“页首Html代码”框中输入如下代码，请将代码中的信息改成自己的。

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/jaday/">jaday</a></h1><span id="subtitle">向上吧！</span></div>');
</script>

步骤如下图所示：

在“通过CSS代码定制代码页面风格”框中输入css样式，代码如下

 1 .head {
 2             height: 60px;
 3             line-height: 60px;
 4             padding-left: 200px;
 5             box-shadow: 0 2px 2px rgba(0,0,0,0.2);
 6             background: #232323;
 7         }
 8 
 9             .head h1 {
10                 float: left;
11                 height: 60px;
12                 font-weight: bold;
13                 font-size: 26px;
14                 text-align: center;
15             }
16 
17                 .head h1 a {
18                     background-color: #007ACC;
19                     border-radius: 3px;
20                     color: #fff;
21                     padding: 5px 15px;
22                 }
23 
24         #subtitle {
25             color: #fff;
26             font-size: 18px;
27             line-height: 60px;
28             margin-left: 50px;
29         }
30 
31         #header {
32             display: block;
33         }

View Code

优化导航栏

将导航栏设置的大气饱满。效果图

css代码如下

 1 #header {
 2             display: block;
 3         }
 4         /*导航栏*/
 5         #navigator {
 6             font-size: 16px;
 7             height: 40px;
 8             background: #232323;
 9             text-align: center;
10             margin-top: 10px;
11             border-radius: 4px;
12             box-shadow: 0px 0px 10px #232323;
13             border: 1px solid #232323;
14         }
15 
16         #navList li {
17             margin: 0;
18             line-height: 40px;
19             display: inline-block;
20             float: left;
21         }
22 
23             #navList li:hover {
24                 background: #333333;
25             }
26 
27             #navList li a {
28                 padding: 0 30px;
29                 text-decoration: none;
30                 line-height: 40px;
31                 border: 0;
32                 color: #007ACC;
33                 font-weight: bold;
34                 display: -moz-inline-box;
35                 display: inline-block;
36             }
37 
38                 #navList li a:hover {
39                     padding: 0 30px;
40                     text-decoration: none;
41                     line-height: 40px;
42                     border: 0;
43                     color: #fff;
44                     font-weight: bold;
45                     display: -moz-inline-box;
46                     display: inline-block;
47                 }
48 
49         .blogStats {
50             height: 40px;
51             color: #007ACC;
52             line-height: 40px;
53         }

View Code

优化左侧边栏

css代码如下

 1 #home {
 2             margin: 15px auto;
 3             opacity: 0.95;
 4             overflow: auto;
 5             width: 1200px;
 6         }
 7 
 8         #main {
 9             margin: 25px 0 15px 0;
10             padding: 0;
11         }
12         /*左边栏*/
13         #sideBar {
14             background: #fff;
15             width: 205px;
16             padding: 25px 15px;
17             font-size: 12px;
18             border-radius: 4px;
19             box-shadow: 0px 0px 10px #232323;
20             border: 1px solid #232323;
21         }
22         /*计算流量*/
23         #calflow {
24             font-size: 16px;
25             font-weight: bold;
26             color: #007ACC;
27         }
28 
29         #sideBarMain {
30             line-height: 24px;
31         }
32 
33             #sideBarMain a {
34                 color: #007ACC;
35             }
36 
37                 #sideBarMain a:hover {
38                     color: #FD772F;
39                 }
40 
41             #sideBarMain ul {
42                 list-style: none outside none;
43                 margin: 0;
44                 padding: 0;
45             }
46 
47                 #sideBarMain ul li {
48                     padding: 0;
49                 }
50 
51                     #sideBarMain ul li a {
52                         padding: 5px 2px 5px 30px;
53                         display: block;
54                         margin: 0 10px 0 -30px;
55                     }
56 
57                         #sideBarMain ul li a:hover {
58                             color: #FFFFFF;
59                             background: #EB453D;
60                             box-shadow: 2px 2px 5px #333333,0 0 6px #2D3636;
61                             text-decoration: none;
62                             width: 200px;
63                         }
64         /*搜索按钮*/
65         #widget_my_google input[type="button"], #widget_my_zzk input[type="button"] {
66             font-family: 'Microsoft Yahei';
67             border-radius: 3px 3px 3px 3px;
68             cursor: pointer;
69             position: relative;
70             vertical-align: middle;
71             display: inline-block;
72             background: #007ACC;
73             color: #fff;
74             border-color: rgba(82, 168, 236, 0.8);
75             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
76             outline: 0 none;
77         }
78 
79             #widget_my_google input[type="button"]:hover, #widget_my_zzk input[type="button"]:hover {
80                 background: #ff7227;
81             }
82         /*公告*/
83         #profile_block {
84             margin-top: 0px;
85             line-height: 24px;
86             text-align: left;
87         }
88 
89         .newsItem .catListTitle {
90             display: none;
91         }
92 
93         .mySearch .catListTitle {
94             display: none;
95         }

View Code

优化博文列表

css代码如下

 1 /*主面板*/
 2         #mainContent {
 3             margin-top: 0px;
 4             padding: 25px 15px;
 5             background: #fff;
 6             float: right;
 7             width: 920px;
 8             border-radius: 4px;
 9             box-shadow: 0px 0px 10px #232323;
10             border: 1px solid #232323;
11         }
12         /*每日文章列表*/
13         .day {
14             background: #fff;
15             padding: 0;
16             margin: 0 0 20px 0;
17         }
18         /*博客标题*/
19         .entrylistPosttitle a, .postTitle a {
20             color: #007ACC;
21         }
22 
23             .entrylistPosttitle a:hover, .postTitle a:hover {
24                 color: #ff7227;
25                 text-decoration: underline;
26             }
27 
28         .entrylistPosttitle, .postTitle {
29             padding-bottom: 10px;
30             font-size: 20px;
31             font-weight: bold;
32             background: url('https://images0.cnblogs.com/blog/317712/201312/15002341-39833976a2a347c39c0cfc6727d6476a.png') no-repeat left center;
33             line-height: 28px;
34             padding-left: 30px;
35             background-color: #232323;
36             border-radius: 4px;
37             border: 1px solid #232323;
38             color: #FFFFFF;
39             padding: 5px 5px 5px 35px;
40         }
41 
42         .dayTitle {
43             display: none;
44         }
45         /*摘要*/
46         .c_b_p_desc {
47             padding: 10px;
48             line-height: 24px;
49             color: #888;
50         }
51 
52             .c_b_p_desc a {
53                 color: #007ACC;
54             }
55 
56                 .c_b_p_desc a:hover {
57                     text-decoration: none;
58                     color: #ff7227;
59                     border-bottom-width: 1px;
60                     border-bottom-style: dotted;
61                 }
62 
63         .c_b_p_desc_readmore {
64             margin-left: 20px;
65         }
66 
67         .desc_img {
68             margin-left: 10px;
69             border: solid 1px #fff;
70             box-shadow: 0 0 10px #aaa;
71         }

View Code

优化底部

css代码如下

/*尾部*/
        #footer {
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #007ACC;
            font-size: 16px;
        }

优化博文内容页及评论区域

css代码如下

  1 /*博客内容页-标题*/
  2         .forFlow {
  3             margin: 0;
  4         }
  5 
  6         .Abstract {
  7             padding: 15px;
  8             border: dotted 2px #999;
  9             color: #999;
 10             font-family: 'Microsoft Yahei';
 11             border-radius: 4px;
 12         }
 13 
 14         .First {
 15             line-height: 28px;
 16             margin: 10px 0;
 17             font-family: 'Microsoft Yahei';
 18             text-align: left;
 19             padding: 3px 20px;
 20             color: #fff;
 21             background: #007ACC;
 22             font-size: 20px;
 23             border-radius: 4px;
 24             clear: both;
 25         }
 26 
 27         .Second {
 28             line-height: 25px;
 29             margin: 10px 0;
 30             font-family: 'Microsoft Yahei';
 31             padding: 3px 20px;
 32             background: #2ca8d3;
 33             color: #fff;
 34             font-size: 18px;
 35             border-radius: 4px;
 36             clear: both;
 37         }
 38 
 39         .Third {
 40             line-height: 20px;
 41             margin: 10px 0;
 42             padding: 3px 20px;
 43             font-family: 'Microsoft Yahei';
 44             margin: 15px 0;
 45             font-size: 16px;
 46             color: #fff;
 47             background: #32c0f1;
 48             color: #999;
 49             border-radius: 4px;
 50             clear: both;
 51         }
 52 
 53         .note {
 54             margin: 10px 0;
 55             padding: 15px 40px 15px 40px;
 56             background: #FCFAA9;
 57             font-size: 15px;
 58             font-family: 'Microsoft Yahei';
 59             box-shadow: 0 0 8px #aaa;
 60             clear: both;
 61         }
 62 
 63         .demo {
 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             border: solid 1px #ccc;
 76             clear: both;
 77         }
 78 
 79         .cnblogs_code {
 80             background: #EFFFF4;
 81             border: solid 0px #939393;
 82             font-size: 14px;
 83             clear: both;
 84             padding: 10px 20px;
 85         }
 86 
 87             .cnblogs_code pre {
 88                 font-size: 14px;
 89             }
 90 
 91             .cnblogs_code span {
 92                 font-family: Courier New;
 93                 font-size: 14px;
 94             }
 95         /*评论按钮*/
 96         #btn_comment_submit {
 97             border: none;
 98             height: 48px;
 99             width: 120px;
100         }
101 
102         .comment_btn {
103             font-family: 'Microsoft Yahei';
104             border-radius: 3px 3px 3px 3px;
105             height: 48px;
106             width: 120px;
107             font-size: 18px;
108             cursor: pointer;
109             position: relative;
110             vertical-align: middle;
111             display: inline-block;
112             background: #007ACC;
113             color: #fff;
114             border-color: rgba(82, 168, 236, 0.8);
115             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
116             outline: 0 none;
117         }
118 
119         #btn_comment_submit:hover {
120             background: #ff7227;
121         }
122         /*评论标题*/
123         .feedback_area_title {
124             padding: 10px;
125             font-size: 24px;
126             font-weight: bold;
127             color: #232323;
128             border-bottom: solid 6px #232323;
129         }
130 
131         .feedbackListSubtitle {
132             font-size: 12px;
133             color: #888;
134         }
135 
136             .feedbackListSubtitle a {
137                 color: #888;
138             }
139 
140         .comment_quote {
141             background: #FCFAAC;
142             padding: 15px;
143             border: 1px solid #CCC;
144         }
145 
146         #commentform_title {
147             color: #007ACC;
148             background-image: none;
149             background-repeat: no-repeat;
150             margin-bottom: 10px;
151             padding: 10px 20px 10px 10px;
152             font-size: 24px;
153             font-weight: bold;
154             border-bottom: solid 6px #007ACC;
155         }
156         /*评论框*/
157         #comment_form {
158             margin: 10px 0;
159             padding: 0;
160         }
161 
162         .commentform {
163             margin: 10px 0;
164             padding: 10px 20px;
165             background: #fff;
166         }
167         /*评论输入域*/
168         #tbCommentBody {
169             font-family: 'MIcrosoft Yahei';
170             margin-top: 10px;
171             width: 900px;
172             max-width: 900px;
173             min-width: 900px;
174             background: white;
175             color: #333;
176             border: 2px solid #fff;
177             box-shadow: inset 0 0 8px #aaa;
178             padding: 10px;
179             height: 120px;
180             font-size: 14px;
181             min-height: 120px;
182         }
183         /*评论条目*/
184         .feedbackItem {
185             font-size: 14px;
186             line-height: 24px;
187             margin: 10px 0;
188             padding: 20px;
189             background: #F2F2F2;
190             box-shadow: 0 0 5px #aaa;
191         }
192 
193         .feedbackListSubtitle {
194             font-weight: normal;
195         }
196         /*顶一下*/
197         .diggnum {
198             font-size: 28px;
199             color: #232323;
200             font-family: 'Microsoft Yahei';
201         }
202 
203         #div_digg .diggnum {
204             line-height: 100px;
205         }
206 
207         .diggit {
208             float: left;
209             width: 48px;
210             height: 85px;
211             background: url('https://images0.cnblogs.com/blog/317712/201312/15102855-0a8583b748b64ab78408944b3bc3fcca.png') no-repeat left bottom;
212             text-align: center;
213             cursor: pointer;
214             padding-top: 2px;
215         }
216 
217             .diggit:hover {
218             }
219         /*隐藏踩一下*/
220         .buryit {
221             display: none;
222         }
223 
224         .diggword {
225             display: none;
226         }
227         /*绿色通道*/
228         #green_channel {
229             text-align: left;
230             background: #232323;
231             padding-left: 20px;
232             font-weight: normal;
233             font-size: 15px;
234             width: 880px;
235             border: none;
236             color: #fff;
237             padding: 10px;
238             border-radius: 4px;
239         }
240         /*最新评论*/
241         #myposts .PostList {
242             font-size: 14px;
243             line-height: 24px;
244             margin: 10px 0;
245             padding: 20px;
246             background: #F2F2F2;
247             box-shadow: 0 0 5px #aaa;
248         }
249 
250         #myposts .postTitl2 a {
251             color: #6DA47D;
252         }
253         /*清除浮动*/
254         .clear {
255             clear: both;
256         }
257         /*屏蔽广告*/
258         .c_ad_block {
259             display: none!important;
260         }
261 
262         /*分类*/
263         .entrylistItemPostDesc a, .postDesc a, #comment_nav a, #post_next_prev a, #author_profile_follow a, #BlogPostCategory a {
264             background-color: #232323;
265             border-radius: 4px;
266             margin: 2px;
267             border: 1px solid #232323;
268             padding: 2px 10px;
269             color: #007ACC;
270         }
271 
272             .entrylistItemPostDesc a:hover, .postDesc a:hover, #comment_nav a:hover, #post_next_prev a:hover, #author_profile_follow a:hover, #BlogPostCategory a:hover {
273                 color: #FD7730;
274                 text-decoration: underline;
275             }
276 
277         #author_profile_info {
278             background: #232323;
279             padding: 10px;
280             border-radius: 4px;
281         }
282 
283         #author_profile_detail a {
284             color: #007ACC;
285         }
286 
287             #author_profile_detail a:hover {
288                 color: #FD7730;
289             }

View Code

结尾

相信有些懒人童鞋懒得看上面的一大堆东西，好吧，来点实际的操作性的。

步骤：

将下面的js代码放到设置页的“页首Html代码”框中

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/jaday/">jaday</a></h1><span id="subtitle">向上吧！</span></div>');
</script>

将下面的css代码放到设置页的“通过CSS代码定制代码页面风格”框中

  1 body {
  2             background: none repeat scroll 0 0 #D8D8D8;
  3             border-bottom: 4px solid #007ACC;
  4             font-family: "微软雅黑","宋体",Arial;
  5             font-size: 15px;
  6             margin: 0;
  7             min-width: 1200px;
  8             padding: 0;
  9             z-index: 1;
 10         }
 11 
 12         h3 {
 13             background-color: #232323;
 14             border-radius: 4px;
 15             border: 1px solid #232323;
 16             box-shadow: 0 2px 2px rgba(0,0,0,0.2);
 17             color: #FFFFFF;
 18             font-size: 16px;
 19             font-weight: bold;
 20             margin: 10px 0;
 21             padding: 5px;
 22             text-align: center;
 23         }
 24 
 25         #blogTitle {
 26             display: none;
 27         }
 28 
 29         .clearfix:after {
 30             clear: both;
 31             content: ".";
 32             display: block;
 33             height: 0;
 34             visibility: hidden;
 35         }
 36 
 37         .head {
 38             height: 60px;
 39             line-height: 60px;
 40             padding-left: 200px;
 41             box-shadow: 0 2px 2px rgba(0,0,0,0.2);
 42             background: #232323;
 43         }
 44 
 45             .head h1 {
 46                 float: left;
 47                 height: 60px;
 48                 font-weight: bold;
 49                 font-size: 26px;
 50                 text-align: center;
 51             }
 52 
 53                 .head h1 a {
 54                     background-color: #007ACC;
 55                     border-radius: 3px;
 56                     color: #fff;
 57                     padding: 5px 15px;
 58                 }
 59 
 60         #subtitle {
 61             color: #fff;
 62             font-size: 18px;
 63             line-height: 60px;
 64             margin-left: 50px;
 65         }
 66 
 67         #header {
 68             display: block;
 69         }
 70         /*导航栏*/
 71         #navigator {
 72             font-size: 16px;
 73             height: 40px;
 74             background: #232323;
 75             text-align: center;
 76             margin-top: 10px;
 77             border-radius: 4px;
 78             box-shadow: 0px 0px 10px #232323;
 79             border: 1px solid #232323;
 80         }
 81 
 82         #navList li {
 83             margin: 0;
 84             line-height: 40px;
 85             display: inline-block;
 86             float: left;
 87         }
 88 
 89             #navList li:hover {
 90                 background: #333333;
 91             }
 92 
 93             #navList li a {
 94                 padding: 0 30px;
 95                 text-decoration: none;
 96                 line-height: 40px;
 97                 border: 0;
 98                 color: #007ACC;
 99                 font-weight: bold;
100                 display: -moz-inline-box;
101                 display: inline-block;
102             }
103 
104                 #navList li a:hover {
105                     padding: 0 30px;
106                     text-decoration: none;
107                     line-height: 40px;
108                     border: 0;
109                     color: #fff;
110                     font-weight: bold;
111                     display: -moz-inline-box;
112                     display: inline-block;
113                 }
114 
115         .blogStats {
116             height: 40px;
117             color: #007ACC;
118             line-height: 40px;
119         }
120 
121         #home {
122             margin: 15px auto;
123             opacity: 0.95;
124             overflow: auto;
125             width: 1200px;
126         }
127 
128         #main {
129             margin: 25px 0 15px 0;
130             padding: 0;
131         }
132         /*左边栏*/
133         #sideBar {
134             background: #fff;
135             width: 205px;
136             padding: 25px 15px;
137             font-size: 12px;
138             border-radius: 4px;
139             box-shadow: 0px 0px 10px #232323;
140             border: 1px solid #232323;
141         }
142         /*计算流量*/
143         #calflow {
144             font-size: 16px;
145             font-weight: bold;
146             color: #007ACC;
147         }
148 
149         #sideBarMain {
150             line-height: 24px;
151         }
152 
153             #sideBarMain a {
154                 color: #007ACC;
155             }
156 
157                 #sideBarMain a:hover {
158                     color: #FD772F;
159                 }
160 
161             #sideBarMain ul {
162                 list-style: none outside none;
163                 margin: 0;
164                 padding: 0;
165             }
166 
167                 #sideBarMain ul li {
168                     padding: 0;
169                 }
170 
171                     #sideBarMain ul li a {
172                         padding: 5px 2px 5px 30px;
173                         display: block;
174                         margin: 0 10px 0 -30px;
175                     }
176 
177                         #sideBarMain ul li a:hover {
178                             color: #FFFFFF;
179                             background: #EB453D;
180                             box-shadow: 2px 2px 5px #333333,0 0 6px #2D3636;
181                             text-decoration: none;
182                             width: 200px;
183                         }
184         /*搜索按钮*/
185         #widget_my_google input[type="button"], #widget_my_zzk input[type="button"] {
186             font-family: 'Microsoft Yahei';
187             border-radius: 3px 3px 3px 3px;
188             cursor: pointer;
189             position: relative;
190             vertical-align: middle;
191             display: inline-block;
192             background: #007ACC;
193             color: #fff;
194             border-color: rgba(82, 168, 236, 0.8);
195             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
196             outline: 0 none;
197         }
198 
199             #widget_my_google input[type="button"]:hover, #widget_my_zzk input[type="button"]:hover {
200                 background: #ff7227;
201             }
202         /*公告*/
203         #profile_block {
204             margin-top: 0px;
205             line-height: 24px;
206             text-align: left;
207         }
208 
209         .newsItem .catListTitle {
210             display: none;
211         }
212 
213         .mySearch .catListTitle {
214             display: none;
215         }
216         /*主面板*/
217         #mainContent {
218             margin-top: 0px;
219             padding: 25px 15px;
220             background: #fff;
221             float: right;
222             width: 920px;
223             border-radius: 4px;
224             box-shadow: 0px 0px 10px #232323;
225             border: 1px solid #232323;
226         }
227         /*每日文章列表*/
228         .day {
229             background: #fff;
230             padding: 0;
231             margin: 0 0 20px 0;
232         }
233         /*博客标题*/
234         .entrylistPosttitle a, .postTitle a {
235             color: #007ACC;
236         }
237 
238             .entrylistPosttitle a:hover, .postTitle a:hover {
239                 color: #ff7227;
240                 text-decoration: underline;
241             }
242 
243         .entrylistPosttitle, .postTitle {
244             padding-bottom: 10px;
245             font-size: 20px;
246             font-weight: bold;
247             background: url('https://images0.cnblogs.com/blog/317712/201312/15002341-39833976a2a347c39c0cfc6727d6476a.png') no-repeat left center;
248             line-height: 28px;
249             padding-left: 30px;
250             background-color: #232323;
251             border-radius: 4px;
252             border: 1px solid #232323;
253             color: #FFFFFF;
254             padding: 5px 5px 5px 35px;
255         }
256 
257         .dayTitle {
258             display: none;
259         }
260         /*摘要*/
261         .c_b_p_desc {
262             padding: 10px;
263             line-height: 24px;
264             color: #888;
265         }
266 
267             .c_b_p_desc a {
268                 color: #007ACC;
269             }
270 
271                 .c_b_p_desc a:hover {
272                     text-decoration: none;
273                     color: #ff7227;
274                     border-bottom-width: 1px;
275                     border-bottom-style: dotted;
276                 }
277 
278         .c_b_p_desc_readmore {
279             margin-left: 20px;
280         }
281 
282         .desc_img {
283             margin-left: 10px;
284             border: solid 1px #fff;
285             box-shadow: 0 0 10px #aaa;
286         }
287         /*尾部*/
288         #footer {
289             height: 24px;
290             line-height: 24px;
291             text-align: center;
292             color: #007ACC;
293             font-size: 16px;
294         }
295         /*博客内容页-标题*/
296         .forFlow {
297             margin: 0;
298         }
299 
300         .Abstract {
301             padding: 15px;
302             border: dotted 2px #999;
303             color: #999;
304             font-family: 'Microsoft Yahei';
305             border-radius: 4px;
306         }
307 
308         .First {
309             line-height: 28px;
310             margin: 10px 0;
311             font-family: 'Microsoft Yahei';
312             text-align: left;
313             padding: 3px 20px;
314             color: #fff;
315             background: #007ACC;
316             font-size: 20px;
317             border-radius: 4px;
318             clear: both;
319         }
320 
321         .Second {
322             line-height: 25px;
323             margin: 10px 0;
324             font-family: 'Microsoft Yahei';
325             padding: 3px 20px;
326             background: #2ca8d3;
327             color: #fff;
328             font-size: 18px;
329             border-radius: 4px;
330             clear: both;
331         }
332 
333         .Third {
334             line-height: 20px;
335             margin: 10px 0;
336             padding: 3px 20px;
337             font-family: 'Microsoft Yahei';
338             margin: 15px 0;
339             font-size: 16px;
340             color: #fff;
341             background: #32c0f1;
342             color: #999;
343             border-radius: 4px;
344             clear: both;
345         }
346 
347         .note {
348             margin: 10px 0;
349             padding: 15px 40px 15px 40px;
350             background: #FCFAA9;
351             font-size: 15px;
352             font-family: 'Microsoft Yahei';
353             box-shadow: 0 0 8px #aaa;
354             clear: both;
355         }
356 
357         .demo {
358             text-align: left;
359             padding: 6px 20px;
360             overflow: auto;
361             border-radius: 4px;
362             background: orange;
363             color: #fff;
364             font-size: 16px;
365             clear: both;
366         }
367 
368         .cnblogs_Highlighter {
369             border: solid 1px #ccc;
370             clear: both;
371         }
372 
373         .cnblogs_code {
374             background: #EFFFF4;
375             border: solid 0px #939393;
376             font-size: 14px;
377             clear: both;
378             padding: 10px 20px;
379         }
380 
381             .cnblogs_code pre {
382                 font-size: 14px;
383             }
384 
385             .cnblogs_code span {
386                 font-family: Courier New;
387                 font-size: 14px;
388             }
389         /*评论按钮*/
390         #btn_comment_submit {
391             border: none;
392             height: 48px;
393             width: 120px;
394         }
395 
396         .comment_btn {
397             font-family: 'Microsoft Yahei';
398             border-radius: 3px 3px 3px 3px;
399             height: 48px;
400             width: 120px;
401             font-size: 18px;
402             cursor: pointer;
403             position: relative;
404             vertical-align: middle;
405             display: inline-block;
406             background: #007ACC;
407             color: #fff;
408             border-color: rgba(82, 168, 236, 0.8);
409             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
410             outline: 0 none;
411         }
412 
413         #btn_comment_submit:hover {
414             background: #ff7227;
415         }
416         /*评论标题*/
417         .feedback_area_title {
418             padding: 10px;
419             font-size: 24px;
420             font-weight: bold;
421             color: #232323;
422             border-bottom: solid 6px #232323;
423         }
424 
425         .feedbackListSubtitle {
426             font-size: 12px;
427             color: #888;
428         }
429 
430             .feedbackListSubtitle a {
431                 color: #888;
432             }
433 
434         .comment_quote {
435             background: #FCFAAC;
436             padding: 15px;
437             border: 1px solid #CCC;
438         }
439 
440         #commentform_title {
441             color: #007ACC;
442             background-image: none;
443             background-repeat: no-repeat;
444             margin-bottom: 10px;
445             padding: 10px 20px 10px 10px;
446             font-size: 24px;
447             font-weight: bold;
448             border-bottom: solid 6px #007ACC;
449         }
450         /*评论框*/
451         #comment_form {
452             margin: 10px 0;
453             padding: 0;
454         }
455 
456         .commentform {
457             margin: 10px 0;
458             padding: 10px 20px;
459             background: #fff;
460         }
461         /*评论输入域*/
462         #tbCommentBody {
463             font-family: 'MIcrosoft Yahei';
464             margin-top: 10px;
465             width: 900px;
466             max-width: 900px;
467             min-width: 900px;
468             background: white;
469             color: #333;
470             border: 2px solid #fff;
471             box-shadow: inset 0 0 8px #aaa;
472             padding: 10px;
473             height: 120px;
474             font-size: 14px;
475             min-height: 120px;
476         }
477         /*评论条目*/
478         .feedbackItem {
479             font-size: 14px;
480             line-height: 24px;
481             margin: 10px 0;
482             padding: 20px;
483             background: #F2F2F2;
484             box-shadow: 0 0 5px #aaa;
485         }
486 
487         .feedbackListSubtitle {
488             font-weight: normal;
489         }
490         /*顶一下*/
491         .diggnum {
492             font-size: 28px;
493             color: #232323;
494             font-family: 'Microsoft Yahei';
495         }
496 
497         #div_digg .diggnum {
498             line-height: 100px;
499         }
500 
501         .diggit {
502             float: left;
503             width: 48px;
504             height: 85px;
505             background: url('https://images0.cnblogs.com/blog/317712/201312/15102855-0a8583b748b64ab78408944b3bc3fcca.png') no-repeat left bottom;
506             text-align: center;
507             cursor: pointer;
508             padding-top: 2px;
509         }
510 
511             .diggit:hover {
512             }
513         /*隐藏踩一下*/
514         .buryit {
515             display: none;
516         }
517 
518         .diggword {
519             display: none;
520         }
521         /*绿色通道*/
522         #green_channel {
523             text-align: left;
524             background: #232323;
525             padding-left: 20px;
526             font-weight: normal;
527             font-size: 15px;
528             width: 880px;
529             border: none;
530             color: #fff;
531             padding: 10px;
532             border-radius: 4px;
533         }
534         /*最新评论*/
535         #myposts .PostList {
536             font-size: 14px;
537             line-height: 24px;
538             margin: 10px 0;
539             padding: 20px;
540             background: #F2F2F2;
541             box-shadow: 0 0 5px #aaa;
542         }
543 
544         #myposts .postTitl2 a {
545             color: #6DA47D;
546         }
547         /*清除浮动*/
548         .clear {
549             clear: both;
550         }
551         /*屏蔽广告*/
552         .c_ad_block {
553             display: none!important;
554         }
555 
556         /*分类*/
557         .entrylistItemPostDesc a, .postDesc a, #comment_nav a, #post_next_prev a, #author_profile_follow a, #BlogPostCategory a {
558             background-color: #232323;
559             border-radius: 4px;
560             margin: 2px;
561             border: 1px solid #232323;
562             padding: 2px 10px;
563             color: #007ACC;
564         }
565 
566             .entrylistItemPostDesc a:hover, .postDesc a:hover, #comment_nav a:hover, #post_next_prev a:hover, #author_profile_follow a:hover, #BlogPostCategory a:hover {
567                 color: #FD7730;
568                 text-decoration: underline;
569             }
570 
571         #author_profile_info {
572             background: #232323;
573             padding: 10px;
574             border-radius: 4px;
575         }
576 
577         #author_profile_detail a {
578             color: #007ACC;
579         }
580 
581             #author_profile_detail a:hover {
582                 color: #FD7730;
583             }

View Code

至此，所有需要优化的区域的代码已经出来了，只是对博主 twobin 博文中的css代码做了小小的改动。

点击保存按钮看看效果吧！