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