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