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

  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 }