博客园 - 皮肤

我做了一个博客皮肤，效果就是现在你看到的样子（本来打算截图的，想想好像多余了...），分享给大家，有兴趣的话你也可以动手改改。

下面说说要怎么做，首先你要有一个博客园的博客，然后找到博客后台管理里的设置，选择Custom模板，并禁用模板默认CSS，在下图所示编辑区里写上你的css代码就可以了。

当然你可以在上述步骤做完之后可以把页面保存下来，能更方便的编辑css文件。打开博客主页ctrl+s就可以保存下来你的博客页面了，其实不只是主页，还有文章页面你也要保存下来进行修改。保存下来的页面只要添加自己的css文件进行编辑，就可以在浏览器里调试，最终把css代码贴上去，并点击设置页面最下面的"保存"按钮就可以看到自己做的皮肤啦！

下面是我的css代码，提供给大家参考。

 

  1 /* Author: Io_oTI*/
  2 
  3 
  4 /*Public*/
  5 
  6 * {
  7     margin: 0;
  8     padding: 0;
  9     box-sizing: border-box;
 10     transition: all 0.5s;
 11 }
 12 
 13 ::selection,
 14 ::-moz-selection {
 15     background: rgba(204, 204, 204, 0.7);
 16 }
 17 
 18 html {
 19     background: #202125;
 20 }
 21 
 22 html,
 23 body {
 24     color: gray;
 25     margin: 0;
 26     padding: 0;
 27     overflow-x: hidden;
 28     font-size: 14px;
 29     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 30 }
 31 
 32 h1 {
 33     font-size: 31px;
 34     font-weight: bold
 35 }
 36 
 37 h2 {
 38     font-size: 23px;
 39     font-weight: bold
 40 }
 41 
 42 h3,
 43 .entrylistItemTitle {
 44     font-size: 15px;
 45     font-weight: bold
 46 }
 47 
 48 ul {
 49     padding: 0;
 50     list-style: none;
 51 }
 52 
 53 a {
 54     color: gray;
 55     text-decoration: none;
 56 }
 57 
 58 a:hover {
 59     color: #E30;
 60 }
 61 
 62 canvas {
 63     position: fixed;
 64     z-index: -1;
 65 }
 66 
 67 /*header*/
 68 
 69 #header {
 70     height: 240px;
 71 }
 72 
 73 #blogTitle,
 74 #navigator {
 75     text-align: center;
 76 }
 77 
 78 a#Header1_HeaderTitle {
 79     font-size: 48px;
 80     padding: 0px 5px;
 81     border-radius: 10px;
 82 }
 83 
 84 a#Header1_HeaderTitle:hover {
 85     color: gray;
 86     /* box-shadow: 0px 2px 3px 1px black; */
 87 }
 88 
 89 #navList li {
 90     display: inline-block;
 91 }
 92 
 93 .blogStats {
 94     width: 240px;
 95     margin: auto;
 96     border-radius: 1em;
 97     background: #C4E17F linear-gradient(to right, #C4E17F, #C4E17F 12.5%, #F7FDCA 12.5%, #F7FDCA 25%, #FECF71 25%, #FECF71 37.5%, #F0776C 37.5%, #F0776C 50%, #DB9DBE 50%, #DB9CBE 62.5%, #C49CDE 62.5%, #C49CDE 75%, #669AE1 75%, #669AE1 87.5%, #62C2E4 87.5%, #62C2E4) repeat scroll 0% 0%;
 98     background-size: 200%;
 99     animation: conveyor 4s ease infinite;
100 }
101 
102 
103 /*main*/
104 
105 #main {
106     margin: auto;
107     padding: 0 20px;
108 }
109 
110 
111 /*mainContent*/
112 
113 #mainContent {
114     margin: 0 auto;
115 }
116 
117 
118 /*main panel*/
119 
120 .day,
121 .commentform,
122 .entrylist,
123 #post_detail,
124 #blog-comments-placeholder,
125 #myposts,
126 .gallery {
127     margin: 0px auto 20px;
128 }
129 
130 .forFlow {
131     border-radius: 3px;
132     background: rgba(51, 51, 51, 0.7);
133 }
134 
135 .dayTitle {
136     float: left;
137     margin-right: 20px;
138 }
139 
140 .postCon,
141 .entrylistPostSummary {
142     margin: 10px auto;
143 }
144 
145 .dayTitle,
146 .postTitle {
147     font-size: 20px;
148     padding-top: 20px;
149 }
150 
151 .postBody {
152     padding: 0px;
153 }
154 
155 .cnblogs_code {
156     border: none;
157     border-radius: 3px;
158     background: rgba(204, 204, 204, 1);
159 }
160 
161 .code_img_opened,
162 .cnblogs_code a,
163 .cnblogs_code div,
164 .cnblogs_code img {
165     background: none;
166 }
167 
168 
169 /*paging*/
170 
171 .topicListFooter {
172     margin: 0px;
173 }
174 
175 .pager {
176     margin: 0 0 20px;
177     padding: 5px;
178     border-radius: 3px;
179     background: rgba(238, 238, 238, 0.7);
180 }
181 
182 .pager a {
183     border-color: lightgray;
184     border-radius: 3px;
185 }
186 
187 .pager a:hover {
188     color: #3F51B5;
189 }
190 
191 /*option*/
192 
193 #green_channel {
194     max-width: 271px;
195     float: right;
196     border: none;
197     margin: 0;
198     overflow: unset;
199 }
200 
201 #green_channel a {
202     float: left;
203     margin: 3px 6px 3px 0px;
204     padding: 3px 7px;
205     background: none;
206     box-shadow: none;
207     text-shadow: none;
208     border-radius: 3px;
209     vertical-align: middle;
210 }
211 
212 #green_channel #green_channel_weibo,
213 #green_channel #green_channel_wechat {
214     padding: 0px 2px;
215 }
216 
217 #div_digg {
218     float: right;
219     width: 124px;
220     margin: 1px 6px;
221     padding: 10px 0;
222 }
223 
224 .diggit,
225 .buryit,
226 #green_channel #green_channel_digg,
227 #green_channel #green_channel_follow,
228 #green_channel #green_channel_favorite {
229     background: rgba(34, 34, 34, 0.7);
230 }
231 
232 .diggit:hover {
233     background: rgba(153, 204, 153, 0.7);
234 }
235 
236 .buryit:hover {
237     background: rgba(153, 153, 204, 0.7);
238 }
239 
240 #green_channel #green_channel_digg:hover {
241     background: rgba(45, 174, 191, 0.7);
242 }
243 
244 #green_channel #green_channel_follow:hover {
245     background: rgba(227, 49, 0, 0.7);
246 }
247 
248 #green_channel #green_channel_favorite:hover {
249     background: rgba(255, 181, 21, 0.7);
250 }
251 
252 .diggit,
253 .buryit {
254     width: 59px;
255     height: 24px;
256     padding: 0px 6px;
257     text-align: left;
258     position: relative;
259     border-radius: 3px;
260 }
261 
262 .buryit {
263     margin: 2px 0px 0px 6px;
264 }
265 
266 .diggit:before,
267 .buryit:before {
268     top: 3px;
269     right: 6px;
270     position: absolute;
271     font-weight: bold;
272 }
273 
274 .diggit:before {
275     color: rgba(255, 0, 0, 0.5);
276     content: "♥";
277     animation: beats 1s ease infinite;
278 }
279 
280 .buryit:before {
281     color: black;
282     content: "♠";
283 }
284 
285 .buryit:hover:before {
286     animation: rotate 0.5s ease infinite;
287 }
288 
289 .diggnum,
290 .burynum {
291     color: white;
292 }
293 
294 
295 /*comment title*/
296 
297 .feedback_area_title,
298 #commentform_title {
299     font-size: 16px;
300     font-weight: bold;
301 }
302 
303 #commentform_title {
304     padding: 0;
305     background-image: none;
306 }
307 
308 
309 /*comment*/
310 
311 .feedbackItem {
312     margin-top: 20px;
313     border-radius: 4px;
314     background: rgba(34, 34, 34, 0.7);
315 }
316 
317 .feedbackListSubtitle {
318     margin-top: 10px;
319     padding: 5px 10px;
320 }
321 
322 .feedbackCon {
323     padding: 5px 10px;
324     border-bottom-left-radius: 4px;
325     border-bottom-right-radius: 4px;
326     background: rgba(68, 68, 68, 0.7);
327 }
328 
329 .feedbackManage {
330     float: right;
331 }
332 
333 div.commentform input.author {
334     color: lightgray;
335     padding: 0;
336     font-size: 14px;
337     border: none;
338     background-color: transparent;
339     background-image: none;
340 }
341 
342 .commentbox_title,
343 div.commentform textarea {
344     width: 100%;
345 }
346 
347 
348 /* menu button */
349 
350 .tols {
351     right: 0px;
352     bottom: 91px;
353     width: 30px;
354     margin: 5px;
355     padding: 5px;
356     position: fixed;
357 }
358 
359 .back-top,
360 .refresh-cmts {
361     width: 20px;
362     height: 20px;
363     display: block;
364 }
365 
366 .back-top {
367     display: none;
368     margin-bottom: 10px;
369     animation: tly .6s ease infinite;
370 }
371 
372 .back-top:before {
373     border-left: 3px solid black;
374     border-top-left-radius: 2px;
375     border-top: 3px solid black;
376     content: '';
377     display: block;
378     height: 12px;
379     left: 2.3px;
380     position: absolute;
381     top: 5px;
382     transform: rotate(45deg);
383     width: 12px;
384 }
385 
386 .refresh-cmts {
387     border-radius: 100%;
388     border-width: 3px;
389     border-style: solid;
390     border-color: black transparent black black;
391 }
392 
393 .refresh-cmts:before,
394 .refresh-cmts:after {
395     background: rgba(0, 0, 0, 0.7);
396     border-radius: 3px;
397     content: '';
398     display: block;
399     position: relative;
400 }
401 
402 .refresh-cmts:before {
403     top: -5px;
404     right: -12px;
405     width: 3px;
406     height: 8px;
407 }
408 
409 .refresh-cmts:after {
410     top: -7px;
411     right: -7px;
412     width: 8px;
413     height: 3px;
414 }
415 
416 .refresh-cmts:hover {
417     animation: rot .8s ease;
418 }
419 
420 .show {
421     display: block;
422 }
423 
424 #menu {
425     display: none;
426 }
427 
428 #menu~label {
429     right: 0px;
430     bottom: 61px;
431     position: fixed;
432     cursor: pointer;
433     display: block;
434     margin: 5px;
435     padding: 5px;
436     transition: all .5s ease;
437 }
438 
439 #menu~label span {
440     background-color: rgba(0, 0, 0, 0.7);
441     border-radius: 5px;
442     display: block;
443     height: 3px;
444     margin: 3px auto;
445     transition: transform .8s ease;
446     width: 20px;
447 }
448 
449 #menu:checked~label .top {
450     -webkit-transform: translateY(5.5px) rotate(-45deg);
451     -moz-transform: translateY(5.5px) rotate(-45deg);
452     -ms-transform: translateY(5.5px) rotate(-45deg);
453     -o-transform: translateY(5.5px) rotate(-45deg);
454     transform: translateY(5.5px) rotate(-45deg);
455 }
456 
457 #menu:checked~label .middle {
458     -webkit-transform: scaleX(0);
459     -moz-transform: scaleX(0);
460     -ms-transform: scaleX(0);
461     -o-transform: scaleX(0);
462     transform: scaleX(0);
463 }
464 
465 #menu:checked~label .bottom {
466     -webkit-transform: translateY(-5.5px) rotate(45deg);
467     -moz-transform: translateY(-5.5px) rotate(45deg);
468     -ms-transform: translateY(-5.5px) rotate(45deg);
469     -o-transform: translateY(-5.5px) rotate(45deg);
470     transform: translateY(-5.5px) rotate(45deg);
471 }
472 
473 #menu:checked~#sideBar {
474     right: 0px;
475 }
476 
477 #menu:checked~label,
478 #menu:checked~.tols {
479     right: 280px;
480 }
481 
482 /*sideBar*/
483 
484 #sideBar {
485     top: 0px;
486     right: -280px;
487     width: 280px;
488     height: 100%;
489     overflow-y: auto;
490     position: fixed;
491     transition: all .5s ease;
492     background: rgba(51, 51, 51, 0.7);
493 }
494 
495 #sideBarMain {
496     padding: 55px 0px;
497 }
498 
499 .profile {
500     border-radius: 100%;
501     display: block;
502     height: 150px;
503     margin: 0 auto;
504     padding: 5px;
505     text-align: center;
506     width: 150px;
507 }
508 
509 .head-img {
510     top: 10px;
511     width: 120px;
512     border-radius: 100%;
513     overflow: visible;
514     box-sizing: border-box;
515     position: relative;
516     animation: scales_bs 1s linear infinite;
517 }
518 
519 #profile_block {
520     text-align: center;
521 }
522 
523 #blog-calendar {
524     color: white;
525     margin: 10px 15px;
526     padding: 10px;
527     font-size: 12px;
528     border-radius: 3px;
529     background: rgba(34, 34, 34, 0.7);
530 }
531 
532 #blog-calendar:hover {
533     background: rgba(153, 204, 153, 0.7);
534 }
535 
536 #blog-calendar td:hover {
537     border-radius: 3px;
538     background: rgba(119, 170, 119, 0.7);
539 }
540 
541 .CalNextPrev,
542 .CalNextPrev {
543     font-weight: bold;
544 }
545 
546 .div_my_zzk {
547     margin: 20px 0px;
548 }
549 
550 .input_my_zzk,
551 .btn_my_zzk,
552 .comment_btn,
553 #commentbox_opt a,
554 div.commentform textarea {
555     color: gray;
556     margin: 2px auto;
557     padding: 2px 5px;
558     border: none;
559     border-radius: 3px;
560     background: rgba(68, 68, 68, 0.7);
561 }
562 
563 /* .btn_my_zzk,
564 .comment_btn,
565 #commentbox_opt a {
566     color: gray;
567     background: gray;
568 } */
569 
570 .btn_my_zzk:hover,
571 .comment_btn:hover,
572 #commentbox_opt a:hover {
573     background: rgba(34, 34, 34, 0.7);
574 }
575 
576 .input_my_zzk,
577 input.btn_my_zzk {
578     width: 100%;
579     height: 25px;
580 }
581 
582 #RecentCommentsBlock {
583     padding: 8px;
584     font-size: 12px;
585     border-radius: 5px;
586     background: rgba(34, 34, 34, 0.7);
587 }
588 
589 .commentform {
590     margin: 0
591 }
592 
593 .input_my_zzk:hover,
594 .input_my_zzk:focus,
595 .comment_textarea:hover,
596 .comment_textarea:focus {
597     outline: 0;
598     color: gray;
599     background: rgba(34, 34, 34, 0.7)
600 }
601 
602 #leftcontentcontainer {
603     padding: 0px 15px;
604 }
605 
606 div#blog-sidecolumn div {
607     margin-bottom: 15px;
608 }
609 
610 .catListTitle {
611     margin-bottom: 5px;
612 }
613 
614 
615 /*footer*/
616 
617 #footer {
618     margin-top: 20px;
619     padding: 20px;
620     text-align: center;
621     background: rgba(51, 51, 51, 0.7);
622 }
623 
624 
625 /* Responsive */
626 
627 @media (min-width: 768px) {
628 
629     #main {
630         width: 90%;
631     }
632 
633     .forFlow {
634         padding: 10px;
635     }
636 }
637 
638 @media (min-width: 992px) {
639     #main {
640         width: 75%;
641     }
642 
643     .forFlow {
644         padding: 15px;
645     }
646 }
647 
648 @media (min-width: 1200px) {
649 
650     #main {
651         width: 60%;
652     }
653 
654     .forFlow {
655         padding: 20px;
656     }
657 
658 }
659 
660 
661 /*animation*/
662 
663 @keyframes conveyor {
664     50% {
665         background-position: 100% 0%;
666     }
667 }
668 
669 @keyframes beats {
670     40% {
671         transform: scale(1.1, 1.1);
672         text-shadow: 0px 0px 1px rgba(255, 0, 0, 0.5);
673     }
674 }
675 
676 @keyframes rotate {
677     25% {
678         transform: rotate(20deg);
679     }
680 
681     50% {
682         transform: rotate(0deg);
683     }
684 
685     75% {
686         transform: rotate(-20deg);
687     }
688 }
689 
690 @keyframes rot {
691     100% {
692         transform: rotate(360deg);
693     }
694 }
695 
696 @keyframes tly {
697     75% {
698         -webkit-transform: translateY(2px);
699         -moz-transform: translateY(2px);
700         -ms-transform: translateY(2px);
701         -o-transform: translateY(2px);
702         transform: translateY(2px);
703     }
704 }
705 
706 @keyframes scales_bs {
707     50% {
708         box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.5);
709     }
710 
711     100% {
712         box-shadow: 0px 0px 0px 20px rgba(0, 0, 0, 0);
713     }
714 }
715 
716 @keyframes scales {
717     50% {
718         transform: scale(1.05, 1.05);
719     }
720 }
721 
722 
723 /*AD Kill*/
724 
725 .newsItem h3,
726 .diggword,
727 #author_profile,
728 #comment_nav,
729 #lnkBlogLogo,
730 #under_post_news,
731 #under_post_kb,
732 #ad_t2,
733 #ad_c1,
734 #ad_c2,
735 #cnblogs_c1,
736 #cnblogs_c2 {
737     display: none;
738 }

了解一下

 

（代码更新：20160614）

（代码更新：20160727）分页按钮的优化

（代码更新：20181225）

（代码更新：20190215）

转载于:https://www.cnblogs.com/io_oti/p/5329067.html