一套简约漂亮的响应式博客园主题皮肤分享给你们（一）

一、背景

　　最近在自己博客园逛的时候，总会有一个感觉，真是太丑了，然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统，上网一搜才发现，原来我们可以自定义博客的布局以及样式的，那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件，然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望，否则很恶心，连自己都这么觉得。下面我们就来分享这个替换步骤教程。
二、实现步骤以及实现原理

1.先copy经过我改良过的博客CSS样式（手机和PC响应式布局）
  1 @font-face {
  2   font-family: 'FontAwesome';
  3   font-style: normal;
  4   font-weight: normal;
  5   src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
  6 }
  7 * {
  8   margin: 0;
  9   padding: 0;
 10 }
 11 body {
 12   background: #eee;
 13   color: #444;
 14   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
 15   font-size: 14px;
 16   text-shadow: 0 0 1px transparent;
 17   color:#505050;
 18 }
 19 @media screen and (max-width: 1260px) {
 20   body {
 21     margin: 0px;
 22   }
 23 }
 24 @media screen and (max-width: 600px) {
 25   body {
 26     font-size: 13px;
 27   }
 28 }
 29 h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
 30 h1 {font-size: 1.8em;}
 31 h2 {font-size: 1.5em;}
 32 h3 {font-size: 1.3em;}
 33 a {text-decoration: none;color: #258fb8;}
 34 a:hover {text-decoration: underline;}
 35 #home{
 36     margin: 0 auto;
 37     width: 85%;
 38     background-color: #fff;
 39     padding: 30px;
 40     margin-top: 50px;
 41     margin-bottom: 50px;
 42     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 43     border-radius: 20px;
 44 }
 45 #tbCommentBody {width: 100%;}
 46 #blogTitle {width:22%;margin-top: -10px;text-align: center;}
 47 .alignright {float: right;}
 48 .clearfix {zoom: 1;}
 49 .clearfix:before,.clearfix:after {content: "";display: table;}
 50 .clearfix:after {clear: both;}
 51 #header, #main, #footer {width: 100%;margin: 0 auto;}
 52 @media screen and (max-width: 1260px) {
 53   #main {
 54     width: 95%;
 55   }
 56 }
 57 #mainContent {
 58   width: 75%;
 59   float: left;
 60   margin-left: 10px;
 61 }
 62 @media screen and (max-width: 1260px) {
 63   #main-col {
 64     width: 100%;
 65     margin-right: -300px;
 66   }
 67 }
 68 @media screen and (max-width: 900px) {
 69   #main-col {
 70     margin-right: 0;
 71     float: none;
 72   }
 73 }
 74 @media screen and (max-width: 1260px) {
 75   #wrapper {
 76     margin-right: 300px;
 77   }
 78 }
 79 @media screen and (max-width: 900px) {
 80   #wrapper {
 81     margin-right: 0;
 82   }
 83 }
 84 #header {
 85   text-shadow: 0 0 1px #fff;
 86   margin: 20px auto 30px;
 87   position: relative;
 88   height: 60px;
 89   color: #999;
 90 }
 91 #header a {
 92   color: #999;
 93 }
 94 #header a:hover {
 95   color: #258fb8;
 96   text-decoration: none;
 97 }
 98 #header h1 {
 99   font-weight: normal;
100   font-size: 30px;
101 }
102 #header h2 {
103   font-weight: normal;
104   font-size: 0.9em;
105   margin-top: 10px;
106   margin-left: 30px;
107 }
108 #header #navigator {
109   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
110   width: 100%;
111   font-size: 16px;
112     border-bottom: 1px solid #ededed;
113     border-top: 1px solid #ededed;
114     height: 50px;
115     line-height: 50px;
116     clear: both;
117     margin-top: 25px;
118 }
119 #header #navigator ul {
120   list-style: none;
121 }
122 #header #navigator ul li {
123   float: left;
124   width: 10%;
125   text-align: center;
126   margin-right: 15px;
127 }
128 #header .blogStats {
129   float: right;
130   font-size: 13px;
131 }
132 .topicListFooter {
133   margin-top:30px;
134   margin-bottom: 30px;
135   margin-right: 0 !important;
136 }
137 .topicListFooter a {
138   display: inline !important;
139   padding: 10px 20px;
140   background: #ddd;
141   color: #999;
142   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
143   text-shadow: 0 0 1px #fff;
144   border-radius: 5px;
145 }
146 .topicListFooter a:hover {
147   background: #258fb8;
148   color: #fff;
149   text-decoration: none;
150   text-shadow: none;
151 }
152 .topicListFooter .prev:before {
153   content: '\f053';
154   padding-right: 10px;
155   font-family: FontAwesome;
156 }
157 .topicListFooter .next:after {
158   content: '\f054';
159   padding-left: 10px;
160   font-family: FontAwesome;
161 }
162 article {
163   -webkit-box-shadow: 1px 2px 3px #ddd;
164   box-shadow: 1px 2px 3px #ddd;
165   background: #fff;
166 }
167 article.page {
168   padding-left: 20px;
169 }
170 article.page .icon {
171   display: none;
172 }
173 .postIcon:before {
174   content: '\f016';
175 }
176 article.photo .icon:before {
177   content: '\f030';
178 }
179 article.link .icon:before {
180   content: '\f0c1';
181 }
182 article.link .title a:after {
183   content: '\f08e';
184   color: #999;
185   font: 12px FontAwesome;
186   padding-left: 10px;
187   vertical-align: super;
188 }
189 /******************************************以下自定义样式***********************************************/
190 #MySignature{
191 border-top: 2px solid #ccc;
192     padding-top: 20px;
193 }
194 .pager{
195     border-bottom: 1px dashed #ddd;
196     padding-bottom: 30px;
197 margin-bottom: -30px;
198 }
199 #blog-calendar{
200   width:0px;
201   height:0px;
202   display: none !important;
203 }
204 #TopViewPostsBlock ul li{
205     white-space: nowrap;
206     overflow: hidden;
207     text-overflow: ellipsis;
208     width: 100%;
209     display: inline-block;
210     height: 30px;
211     line-height: 30px;
212 }
213 .day .dayTitle{
214       display: none !important;
215 }
216 //去掉广告
217 #ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{
218     display: none !important;
219 }
220 .postTitle, .entrylistPosttitle {
221   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
222   font-size: 1.8em;
223   padding: 20px 20px 15px 0px;
224   background: #fff;
225   border-radius: 10px 10px 0px 0px;
226   white-space: nowrap;
227   overflow: hidden;
228   text-overflow: ellipsis;
229 }
230 .entrylistPostSummary, .postCon, .postBody {
231   padding: 0 20px 15px 0px;
232   -webkit-box-shadow: 1px 2px 3px #ddd;
233   box-shadow: 0 2px 0 #ddd;
234   background: #fff;
235   position: relative;
236 }
237 .postDesc, .entrylistItemPostDesc {
238   padding: 0px 20px 15px 0px;
239   color: #999;
240   font-size: 0.9em;
241   line-height: 16px;
242   position: relative;
243   min-height: 16px;
244   background: #fff;
245   border-bottom: 1px dashed #ccc;
246 }
247 #blog-calendar {
248   display: none;
249 }
250 @media screen and (max-width: 600px) {
251   .postCon {
252     padding-left: 0px;
253   }
254 }
255 .postIcon {
256   height: 0px;
257   margin-right: 25px;
258   position: relative;
259   top: 25px;
260   left: 25px;
261   color: #258fb8;
262 }
263 @media screen and (max-width: 600px) {
264   article header .icon {
265     display: none;
266   }
267 }
268 .postIcon:before {
269   position: absolute;
270   font: 32px FontAwesome;
271   top: 0;
272   left: 0;
273   width: 32px;
274   text-align: center;
275 }
276 article header time {
277   color: #999;
278   font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
279   margin-bottom: 5px;
280   display: block;
281   line-height: 1;
282 }
283 article header .title {
284   font-weight: normal;
285 }
286 article header .title a {
287   color: #444;
288 }
289 article header .title a:hover {
290   color: #258fb8;
291   text-decoration: none;
292 }
293 #cnblogs_post_body {
294   text-align: justify;
295   line-height: 1.6;
296 }
297 #cnblogs_post_body p,
298 #cnblogs_post_body blockquote,
299 #cnblogs_post_body ul,
300 #cnblogs_post_body ol,
301 #cnblogs_post_body dl,
302 #cnblogs_post_body table,
303 #cnblogs_post_body iframe,
304 #cnblogs_post_body h3,
305 #cnblogs_post_body h4,
306 #cnblogs_post_body h5,
307 #cnblogs_post_body h6,
308 #cnblogs_post_body .video-container {
309   margin-top: 15px;
310 }
311 #cnblogs_post_body blockquote {
312   border-top: 1px solid #ddd;
313   border-bottom: 1px solid #ddd;
314   font-style: italic;
315   font-family: "Georgia", serif;
316   font-size: 1.2em;
317   padding: 0 30px 15px;
318 }
319 #cnblogs_post_body blockquote footer {
320   border-top: none;
321   font-size: 0.8em;
322   line-height: 1;
323   margin: 20px 0 0;
324   padding-top: 0;
325 }
326 #cnblogs_post_body blockquote footer cite:before {
327   content: '—';
328   color: #ccc;
329   padding: 0 0.5em;
330 }
331 #cnblogs_post_body code,
332 #cnblogs_post_body pre {
333   font-family: Monaco, Menlo, Consolas, Courier New, monospace;
334 }
335 #cnblogs_post_body code {
336   background: #eee;
337   color: #666;
338   padding: 0 5px;
339   margin: 0 2px;
340   font-size: 0.9em;
341   border: 1px solid #ddd;
342   -webkit-border-radius: 3px;
343   border-radius: 3px;
344 }
345 #cnblogs_post_body pre {
346   background: #eee;
347   overflow: auto;
348   padding: 7px 15px;
349   -webkit-border-radius: 2px;
350   border-radius: 2px;
351 }
352 #cnblogs_post_body pre code {
353   background: none;
354   padding: 0;
355   margin: 0;
356   border: none;
357   -webkit-border-radius: 0;
358   border-radius: 0;
359 }
360 #cnblogs_post_body ul ul,
361 #cnblogs_post_body ol ul,
362 #cnblogs_post_body dl ul,
363 #cnblogs_post_body ul ol,
364 #cnblogs_post_body ol ol,
365 #cnblogs_post_body dl ol,
366 #cnblogs_post_body ul dl,
367 #cnblogs_post_body ol dl,
368 #cnblogs_post_body dl dl {
369   margin-top: 0;
370 }
371 #cnblogs_post_body h1,
372 #cnblogs_post_body h2 {
373   font-weight: bold;
374   border-bottom: 1px solid #ddd;
375   padding-bottom: 10px;
376   margin-top: 20px;
377 }
378 #cnblogs_post_body h3,
379 #cnblogs_post_body h4,
380 #cnblogs_post_body h5,
381 #cnblogs_post_body h6 {
382   font-weight: normal;
383   background: #eee;
384     border-radius: 6px;
385     color: Red;
386     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
387     height: 25px;
388     line-height: 25px;
389     margin: 18px 5px !important;
390     padding: 8px;
391     opacity: 0.8;
392     border: 1px dashed #aaa;
393 }
394 .postBody img, 
395 .entrylistPostSummary img, .postCon img,
396 .postBody video {
397   max-width: 100%;
398   height: auto;
399   border: none;
400 }
401 #cnblogs_post_body iframe {
402   border: none;
403 }
404 #cnblogs_post_body .caption {
405   display: block;
406   margin-top: 5px;
407   color: #999;
408   position: relative;
409   font-size: 0.9em;
410   padding-left: 25px;
411 }
412 #cnblogs_post_body .caption:before {
413   content: '\f040';
414   position: absolute;
415   font: 1.3em FontAwesome;
416   position: absolute;
417   left: 0;
418   top: 3px;
419 }
420 #cnblogs_post_body .video-container {
421   position: relative;
422   padding-bottom: 56.25%;
423   padding-top: 30px;
424   height: 0;
425   overflow: hidden;
426 }
427 #cnblogs_post_body .video-container iframe,
428 #cnblogs_post_body .video-container object,
429 #cnblogs_post_body .video-container embed {
430   position: absolute;
431   top: 0;
432   left: 0;
433   width: 100%;
434   height: 100%;
435   margin-top: 0;
436 }
437 #cnblogs_post_body .pullquote {
438   float: right;
439   border: none;
440   padding: 0;
441   margin: 1em 0 0.5em 1.5em;
442   text-align: left;
443   width: 45%;
444   font-size: 1.5em;
445 }
446 #blog-comments-placeholder, #comment_form {
447   padding: 20px;
448   background: #fff;
449   -webkit-box-shadow: 1px 10px 10px #ddd;
450   box-shadow: 10px 10px 10px #ddd;
451   margin-bottom: 50px;
452     border: 1px solid #ccc;
453 padding-top:0;
454 }
455 .feedback_area_title {
456   margin-bottom: 15px;
457   font-size: 1.8em;
458 }
459 .feedbackItem {
460   border-bottom: 1px dashed #CCC;
461   margin-bottom: 10px;
462   padding: 5px;
463 }
464 .color_shine {background: rgb(226, 242, 255);}
465 .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
466 #comment_form .title {
467   font-weight: normal;
468   margin-bottom: 15px;
469 }
470 #ad_under_post_holder {
471   display: none;
472 }
473 .entrylistTitle {
474   color: #999;
475   font-weight: normal;
476   margin-bottom: 30px;
477   text-shadow: 0 0 1px #fff;
478 }
479 .entrylistTitle:before {
480   font-family: FontAwesome;
481   content: '\f07b';
482   padding-right: 15px;
483 }
484 .archive {
485   -webkit-box-shadow: 1px 2px 3px #ddd;
486   box-shadow: 1px 2px 3px #ddd;
487   border-bottom: 1px solid #ddd;
488   margin-bottom: 50px;
489 }
490 .archive article {
491   -webkit-box-shadow: none;
492   box-shadow: none;
493 }
494 .archive article .post-content {
495   margin-bottom: 0;
496 }
497 #sideBar{
498   width: 22%;
499   line-height: 1.8em;
500   float: right;
501 }
502 @media screen and (max-width: 900px) {
503   #sideBar {
504     float: none;
505     width: 100%;
506   }
507 }
508 .catListLink, .catListMyTeams, .catListComment, .catListFeedback {
509   display: none;
510 }
511 .search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {
512   background: #fff;
513   -webkit-box-shadow: 1px 2px 3px #ddd;
514   box-shadow: 10px 10px 10px #ddd;
515   margin-bottom: 30px;
516   word-wrap: break-word;
517   border-radius: 10px;
518   margin-top: 10px;
519   border: 1px solid #ddd;
520 }
521 #blog-sidecolumn h3, .newsItem h3 {
522   padding: 15px 20px;
523   font-size: 1em;
524   border-bottom: 1px solid #ddd;
525   font-weight: normal;
526 }
527 #blog-sidecolumn ul, .newsItem #blog-news {
528   font-size: 0.9em;
529   padding: 15px 20px;
530 }
531 #blog-sidecolumn ul,
532 #blog-sidecolumn ol,
533 #blog-sidecolumn dl {
534   list-style: none;
535 }
536 #blog-sidecolumn ul ul,
537 #blog-sidecolumn ol ul,
538 #blog-sidecolumn dl ul,
539 #blog-sidecolumn ul ol,
540 #blog-sidecolumn ol ol,
541 #blog-sidecolumn dl ol,
542 #blog-sidecolumn ul dl,
543 #blog-sidecolumn ol dl,
544 #blog-sidecolumn dl dl {
545   list-style: disc;
546   margin-left: 20px;
547 }
548 #q {
549   background: #fff;
550   font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
551   font-style: italic;
552   font-size: 1em;
553   padding: 10px 15px;
554   border: 1px solid #ddd;
555   width: 100%;
556   -webkit-box-sizing: border-box;
557   -moz-box-sizing: border-box;
558   box-sizing: border-box;
559   color: #999;
560   height: 100%;
561 }
562 #q:focus {
563   color: #444;
564 }
565 /*隐藏搜索框中的无用组件*/
566 .mySearch {
567   display: none;
568 }
569 
570 #sideBar .tag small {
571   margin-left: 15px;
572   color: #999;
573 }
574 #sideBar .tag small:before {
575   content: '(';
576 }
577 #sideBar .tag small:after {
578   content: ')';
579 }
580 #sideBar .twitter li {
581   border-bottom: 1px solid #ddd;
582   padding: 15px 20px;
583   font-size: 0.9em;
584 }
585 #sideBar .twitter li:last-of-type {
586   border-bottom: none;
587 }
588 #sideBar .twitter small {
589   display: block;
590   margin-top: 10px;
591   color: #999;
592   line-height: 1;
593 }
594 #sideBar .tagcloud .entry {
595   padding-right: 5px;
596 }
597 #sideBar .tagcloud a {
598   margin-right: 10px;
599   display: inline-block;
600 }
601 #footer {
602   color: #999;
603   margin-bottom: 50px;
604   font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
605   text-shadow: 0 0 1px #fff;
606   text-align:center;
607   margin: 30px 0px 50px;
608 }
609 .entry .gist {
610   background: #eee;
611   border: 1px solid #ddd;
612   margin-top: 15px;
613   padding: 7px 15px;
614   -webkit-border-radius: 2px;
615   border-radius: 2px;
616   text-shadow: 0 0 1px #fff;
617   line-height: 1.6;
618   overflow: auto;
619   color: #666;
620 }
621 .entry .gist .gist-file {
622   border: none;
623   font-family: inherit;
624   margin: 0;
625   font-size: 0.9em;
626 }
627 .entry .gist .gist-file .gist-data {
628   background: none;
629   border-bottom: none;
630 }
631 .entry .gist .gist-file .gist-data pre {
632   padding: 0 !important;
633   font-family: Monaco, Menlo, Consolas, Courier New, monospace;
634 }
635 .entry .gist .gist-file .gist-meta {
636   background: none;
637   color: #999;
638   margin-top: 5px;
639   padding: 0;
640   text-shadow: 0 0 1px #fff;
641   font-size: 100%;
642 }
643 .entry .gist .gist-file .gist-meta a {
644   color: #258fb8;
645 }
646 .entry .gist .gist-file .gist-meta a:visited {
647   color: #258fb8;
648 }
649 figure.highlight {
650   background: #eee;
651   border: 1px solid #ddd;
652   margin-top: 15px;
653   padding: 7px 15px;
654   -webkit-border-radius: 2px;
655   border-radius: 2px;
656   text-shadow: 0 0 1px #fff;
657   line-height: 1.6;
658   overflow: auto;
659   position: relative;
660   font-size: 0.9em;
661 }
662 figure.highlight figcaption {
663   color: #999;
664   margin-bottom: 5px;
665   text-shadow: 0 0 1px #fff;
666 }
667 figure.highlight figcaption a {
668   position: absolute;
669   right: 15px;
670 }
671 figure.highlight pre {
672   border: none;
673   padding: 0;
674   margin: 0;
675 }
676 figure.highlight table {
677   margin-top: 0;
678   border-spacing: 0;
679 }
680 figure.highlight .gutter {
681   color: #999;
682   padding: 7px 10px 7px 5px !important;
683   border-right: 1px solid #ddd;
684   text-align: right;
685 }
686 figure.highlight .code {
687   padding: 7px 7px 7px 10px !important;
688   border-left: 1px solid #fff;
689   color: #666;
690 }
691 pre .comment,
692 pre .template_comment,
693 pre .diff .header,
694 pre .doctype,
695 pre .pi,
696 pre .lisp .string,
697 pre .javadoc {
698   color: #93a1a1;
699   font-style: italic;
700 }
701 pre .keyword,
702 pre .winutils,
703 pre .method,
704 pre .addition,
705 pre .css .tag,
706 pre .request,
707 pre .status,
708 pre .nginx .title {
709   color: #859900;
710 }
711 pre .number,
712 pre .command,
713 pre .string,
714 pre .tag .value,
715 pre .phpdoc,
716 pre .tex .formula,
717 pre .regexp,
718 pre .hexcolor {
719   color: #2aa198;
720 }
721 pre .title,
722 pre .localvars,
723 pre .chunk,
724 pre .decorator,
725 pre .built_in,
726 pre .identifier,
727 pre .vhdl,
728 pre .literal,
729 pre .id {
730   color: #268bd2;
731 }
732 pre .attribute,
733 pre .variable,
734 pre .lisp .body,
735 pre .smalltalk .number,
736 pre .constant,
737 pre .class .title,
738 pre .parent,
739 pre .haskell .type {
740   color: #b58900;
741 }
742 pre .preprocessor,
743 pre .preprocessor .keyword,
744 pre .shebang,
745 pre .symbol,
746 pre .symbol .string,
747 pre .diff .change,
748 pre .special,
749 pre .attr_selector,
750 pre .important,
751 pre .subst,
752 pre .cdata,
753 pre .clojure .title {
754   color: #cb4b16;
755 }
756 pre .deletion {
757   color: #dc322f;
758 }
759 .feedbackListSubtitle { position: relative;}
760 .feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}
761 .cnblogs_code_toolbar {display: none;}
762 #cnblogs_post_body {overflow: hidden;}
763 #cnblogs_post_body ol { padding-left: 40px;}
764 #cnblogs_post_body ul { margin-left: 35px;}
765 .fixedReadRank { position: fixed; top: 20px; width: 270px; }
766 .fixedRecRank { position: fixed; top: 360px; width: 270px; }
767 figure.highlight { margin-top: 0; padding: 0;}
768 figure table {width: 100%; margin: 0 !important;}
769 #cnblogs_post_body pre { padding: 0; }
770 #cnblogs_post_body th, #cnblogs_post_body td { padding: 0; }
771 .cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}
772 .cnblogs_code th {border: 1px solid silver; padding: 3px;}
773 .cnblogs_code { padding: 0;}
774 /*评论标题*/
775 .feedback_area_title {
776     padding:10px;
777     font-size:24px;
778     font-weight:bold;
779     color:#aaa;
780     border-bottom:1px dashed #ccc;
781 }
782 .feedbackListSubtitle {
783     font-size:12px;
784     color:#888;
785 }
786 .feedbackListSubtitle a {
787     color:#888;
788 }
789 .comment_quote {
790     background:#eee;
791     padding:15px;
792     border:1px dashed #aaa;
793 　　 border-radius:5px;
794 }#commentform_title {
795     color:#aaa;
796     background-image:none;
797     background-repeat:no-repeat;
798     margin-bottom:10px;
799     padding:10px 20px 10px 10px;
800     font-size:24px;
801     font-weight:bold;
802     border-bottom:1px dashed #ccc;
803 }
804 /*评论框*/
805 #comment_form {
806     margin:10px 0;
807     padding:25px;
808     border-radius: 10px;
809     height: 343px;
810     overflow: hidden;
811 }
812 .commentform {
813     margin:10px 0;
814     padding:10px 20px;
815     background:#fff;
816 }
817 /*评论输入域*/
818 #tbCommentBody {
819     font-family:'MIcrosoft Yahei';
820     margin-top:10px;
821     background:white;
822     color:#333;
823     border:2px solid #fff;
824     box-shadow:inset 0 0 8px #aaa;
825     height:120px;
826     font-size:14px;
827     min-height:120px;
828     border-radius: 10px;
829 }
830 /*评论条目*/
831 .feedbackItem {
832     font-size:14px;
833     line-height:24px;
834     margin:10px 0;
835     padding:20px;
836 }
837 .feedbackListSubtitle {
838     font-weight:normal;
839 }
840 
841 /*green_channel*/
842 #green_channel {
843     text:align:right;
844     padding-left:0px;
845     font-weight:normal;
846     font-size:13px;
847     width:100%;
848     border:1px dashed #ccc;
849     color:#fff;
850     border-radius:4px;
851     margin:5px auto;
852 }
853 @media screen and (max-width: 768px) {
854   body {
855     font-size: 13px;
856   }
857   #main{padding:0px !important;}
858   #mainContent{width: 96%;float: left;margin: 0px 2%;}
859   #sideBar {display: none;}
860   #blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;}
861   #header{height:auto !important;margin: 20px auto 5px;}
862   #header #navigator{width: 100%;text-align: center;float:none;}
863   #header #navigator ul{width: 100%;margin-left: 6%;}
864   #header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}
865   .postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;}
866   .postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;}
867   #green_channel{padding:0px !important;}
868   #blog_stats{display: none;}
869 }
870 #blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;}
871 #div_digg{
872     padding: 5px;
873     border-radius: 5px;
874     position: fixed;
875     left: 0;
876     bottom: 80px;
877     width:80px;
878     z-index:100;
879 }
880 .diggit{
881 background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;
882     width: 60px;
883     height: 60px;
884 }
885 #div_digg .diggnum{
886 position: absolute;
887     bottom: -20px;
888     left: 6px;
889     background: #D0D0D0;
890     padding: 2px 0;
891     display: block;
892     color: #555;
893     font-size: 12px;
894     text-align: center;
895     width: 60px;
896     -moz-border-radius: 4px;
897     -webkit-border-radius: 4px;
898     font-weight: bold;
899 }
900 .buryit{
901 display: none;
902 }
903 div.commentform textarea.comment_textarea{
904   padding:10px;
905 }
906 #tbCommentBody{
907 　　98%;
908 }
909 /*scroll to top*/
910 #scrollTop div{
911     left:0;
912     overflow:hidden;
913     position:absolute;
914     top:0;
915     width:149px;
916     margin:0;
917     padding:0
918 }
919 #scrollTop .level-2{
920     background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;
921     display:none;
922     height:250px;
923     opacity:0;
924     z-index:1
925 }
926 #scrollTop .level-3{
927     background:none repeat scroll 0 0 transparent;
928     cursor:pointer;
929     display:block;
930     height:150px;
931     z-index:2
932 }
933 #scrollTop{
934  background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;
935     cursor:default;
936     display:block;
937     height:250px;
938     overflow:hidden;
939     position:fixed;
940     right:0;
941     top:80%;
942     width:149px;
943     z-index:11;
944     margin:-125px 0 0;
945     padding:0
946 }
947 /*评论带头像，且支持旋转*/
948 .feedbackCon img:hover {
949 -webkit-transform: rotateZ(360deg);
950 -moz-transform: rotateZ(360deg);
951 -ms-transform: rotateZ(360deg);
952 -o-transform: rotateZ(360deg);
953 transform: rotateZ(360deg);
954 }
955  
956 .feedbackCon img {
957 border-radius: 40px;
958 -webkit-transition: all 0.6s ease-out;
959 -moz-transition: all 0.5s ease-out;
960 -ms-transition: all 0.5s ease-out;
961 -o-transition: all 0.5s ease-out;
962 transition: all 0.5s ease-out;
963 }
View Code
最近有博友反应，评论回复以后出现了评论框和按钮被遮盖的问题，这里给出解决办法：只需要把上面CSS样式中：#comment_form的height: 343px;及overflow: hidden;删除即可。
2.到自己博客的设置页面