一、背景
最近在自己博客园逛的时候，总会有一个感觉，真是太丑了，然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统，上网一搜才发现，原来我们可以自定义博客的布局以及样式的，那我就在网上找到了一个哥们的自定义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 }
最近有博友反应，评论回复以后出现了评论框和按钮被遮盖的问题，这里给出解决办法：只需要把上面CSS样式中：#comment_form的height: 343px;及overflow: hidden;删除即可。
2.到自己博客的设置页面
3.把copy的CSS样式粘贴到如下的位置并勾选禁用模板默认CSS
4.点击保存，自定义样式成功，而且博客详情里评论位置烦人的广告也没有了。
5.原理说明
我首先拿到哥们的基础CSS以后，然后在我的博客首页进行按F12，调出页面Debug工具，然后根据自己的需求修改对应元素的样式，修改后所见即所得。很方便，满意以后，再把这些CSS在基础CSS里面替换掉，保存就好了，再按照上面的方法替换博客默认CSS。也很简单，不过需要你有一定的CSS功底！
三、效果展示
既有元素阴影，还有爽翻人的圆角，是不是感觉瞬间逼格就高大上了呢，还有一点，你发现那些很恶心的日历控件也被干掉了，变得越来越干净和纯粹了，烦人的广告通通走开吧！赞一个！