CSS样式
1 /* 鍏ㄥ眬 */ 2 html, body { 3 margin: 0; 4 padding: 0; 5 border: 0; 6 width: 100%; 7 height: 100%; 8 color: #555 !important; 9 font-family: "Microsoft YaHei"; 10 } 11 12 #home, #sideBar{ 13 height: 100%; 14 } 15 16 #main { 17 min-height: 1800px; 18 } 19 20 a { 21 text-decoration: none; 22 padding-bottom: 2px; 23 color: #e06c75; 24 -webkit-transition: 0.3s; 25 } 26 27 a:hover { 28 /*border-bottom: 1px solid;*/ 29 color: #fff; 30 text-shadow: -1px 0 0 #1487cc, 0 1px 0 #1487cc, 1px 0 0 #1487cc, 0 -1px 0 #1487cc; 31 -webkit-transition: 0.3s; 32 } 33 34 table * { 35 margin: 0 !important; 36 } 37 38 /* 鍏ㄥ眬 */ 39 40 /* 瀵艰埅 */ 41 div#header { 42 width: 100%; 43 position: absolute; 44 height: 60px; 45 z-index: 999; 46 } 47 48 div#blogTitle { 49 display: none; 50 } 51 52 ul#navList { 53 list-style: none; 54 float: right; 55 margin-right: 50px; 56 } 57 58 ul#navList li { 59 float: left; 60 display: inline; 61 padding-left: 20px; 62 63 } 64 65 ul#navList li a { 66 font-size: 12px; 67 } 68 69 .blogStats { 70 font-size: 9px; 71 left: 370px; 72 top: 40px; 73 color: #555; 74 position: absolute; 75 } 76 77 /* 瀵艰埅 */ 78 79 /* 姝ｆ枃 - 鏂囩珷鍒楄〃 */ 80 81 #mainContent { 82 float: left; 83 width: 100%; 84 /*padding-left: 320px;*/ 85 padding-top: 60px; 86 } 87 88 .forFlow { 89 max-width: 100%; 90 margin: 0 auto; 91 margin-left: 370px; 92 margin-right: 50px; 93 } 94 95 .dayTitle { 96 display: none; 97 } 98 99 .forFlow { 100 border-top: solid 1px #ccc; 101 } 102 103 .postTitle, .entrylistPosttitle { 104 background-image: url(//images.cnblogs.com/cnblogs_com/sgtb/641997/o_55.png); 105 background-repeat: no-repeat; 106 background-position: left center; 107 font-size: 22px; 108 font-weight: bold; 109 padding: 40px; 110 } 111 112 .postCon, .entrylistPostSummary { 113 font-size: 14px; 114 color: #444; 115 line-height: 1.8; 116 padding-left: 20px; 117 } 118 119 .postDesc, .entrylistItemPostDesc { 120 text-align: right; 121 font-size: 9px; 122 color: #999; 123 padding-top: 20px; 124 padding-bottom: 40px; 125 border-bottom: solid 1px #ccc; 126 } 127 128 .entrylistDescription { 129 /*border-bottom: solid 1px #ccc;; 130 margin-left: 20px; 131 margin-right: 20px;*/ 132 } 133 134 /* 姝ｆ枃 - 鏂囩珷鍒楄〃 */ 135 136 /* 姝ｆ枃 - 鏂囩珷 */ 137 138 #cnblogs_post_body img { 139 max-width: 100% !important; 140 height: auto; 141 } 142 143 blockquote { 144 background: none; 145 border: 0; 146 padding-left: 10px; 147 padding-right: 10px; 148 padding-top: 5px; 149 padding-bottom: 5px; 150 margin-top: 10px; 151 margin-bottom: 10px; 152 } 153 154 h1, h2, h3, h4, h5, h6, p{ 155 line-height: 2 !important; 156 margin: 30px 0 15px !important; 157 } 158 159 img, pre { 160 line-height: 2 !important; 161 } 162 163 164 code { 165 margin: 10px 0 20px 0; 166 border-radius: 5px; 167 box-shadow: 0px 0px 3px #999; 168 } 169 170 #cnblogs_post_body img { 171 max-width: 100%; 172 height: auto; 173 margin: 10px 0 20px 0; 174 border-radius: 5px; 175 box-shadow: 0px 0px 8px #999; 176 } 177 178 #cnblogs_post_body pre { 179 margin-top: 10px; 180 margin-bottom: 20px; 181 } 182 183 #cnblogs_post_body table * { 184 margin: 0 !important; 185 } 186 187 #cnblogs_post_body table img { 188 box-shadow: none; 189 border-radius: 0; 190 } 191 192 #cnblogs_post_body table { 193 width: 100% !important; 194 border: 0 !important; 195 margin: 20px 0 50px 0; 196 border-collapse: collapse; 197 border-spacing: 0; 198 line-height: 40px; 199 border-radius: 8px; 200 box-shadow: 0px 0px 5px #999; 201 } 202 203 #cnblogs_post_body table th { 204 background: #73b1e0; 205 font-weight: 800; 206 font-size: 18px; 207 line-height: 50px; 208 color: #FFF; 209 padding: 5px 20px 5px 20px; 210 text-align: left; 211 } 212 213 #cnblogs_post_body table tr:nth-child(odd) { 214 background: #F4F4F4; 215 } 216 217 #cnblogs_post_body table tr:hover, 218 #cnblogs_post_body table td:hover { 219 background: #badbf5; 220 } 221 222 #cnblogs_post_body table a { 223 color: #000; 224 } 225 226 #cnblogs_post_body table td, table th { 227 /*border: 1px solid #EEE !important;*/ 228 border: 0 !important; 229 padding: 5px 20px 5px 20px 230 } 231 232 #cnblogs_post_body table tr:first-child th:first-child { 233 border-top-left-radius: 3px; 234 } 235 236 #cnblogs_post_body table tr:first-child th:last-child { 237 border-top-right-radius: 3px; 238 } 239 240 #cnblogs_post_body table tr:last-child td:first-child { 241 border-bottom-left-radius: 3px; 242 } 243 244 #cnblogs_post_body table tr:last-child td:last-child { 245 border-bottom-right-radius: 3px; 246 } 247 248 /* 249 250 Atom One Dark by Daniel Gamage 251 Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax 252 253 base: #282c34 254 mono-1: #abb2bf 255 mono-2: #818896 256 mono-3: #5c6370 257 hue-1: #56b6c2 258 hue-2: #61aeee 259 hue-3: #c678dd 260 hue-4: #98c379 261 hue-5: #e06c75 262 hue-5-2: #be5046 263 hue-6: #d19a66 264 hue-6-2: #e6c07b 265 266 */ 267 268 .cnblogs-markdown code.hljs, 269 .cnblogs-post-body code.hljs, 270 .hljs { 271 display: block !important; 272 overflow-x: auto !important; 273 padding: 1em !important; 274 color: #abb2bf !important; 275 background: #282c34 !important; 276 font-size: 14px !important; 277 font-family: "Microsoft YaHei" !important; 278 } 279 280 .hljs-comment, 281 .hljs-quote { 282 color: #5c6370 !important; 283 font-style: italic !important; 284 } 285 286 .hljs-doctag, 287 .hljs-keyword, 288 .hljs-formula { 289 color: #c678dd !important; 290 } 291 292 .hljs-section, 293 .hljs-name, 294 .hljs-selector-tag, 295 .hljs-deletion, 296 .hljs-subst { 297 color: #e06c75 !important; 298 } 299 300 .hljs-literal { 301 color: #56b6c2 !important; 302 } 303 304 .hljs-string, 305 .hljs-regexp, 306 .hljs-addition, 307 .hljs-attribute, 308 .hljs-meta-string { 309 color: #98c379 !important; 310 } 311 312 .hljs-built_in, 313 .hljs-class .hljs-title { 314 color: #e6c07b !important; 315 } 316 317 .hljs-attr, 318 .hljs-variable, 319 .hljs-template-variable, 320 .hljs-type, 321 .hljs-selector-class, 322 .hljs-selector-attr, 323 .hljs-selector-pseudo, 324 .hljs-number { 325 color: #d19a66 !important; 326 } 327 328 .hljs-symbol, 329 .hljs-bullet, 330 .hljs-link, 331 .hljs-meta, 332 .hljs-selector-id, 333 .hljs-title { 334 color: #61aeee !important; 335 } 336 337 .hljs-emphasis { 338 font-style: italic; 339 } 340 341 .hljs-strong { 342 font-weight: bold; 343 } 344 345 .hljs-link { 346 text-decoration: underline; 347 } 348 349 /* 姝ｆ枃 - 鏂囩珷 */ 350 351 /* 姝ｆ枃 - 鏍囬�棰ゆ姈 */ 352 353 h1.postTitle { 354 font-size: 30px; 355 font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; 356 font-weight: 500; 357 padding: 0; 358 background-image: none; 359 display: inline-block; 360 -webkit-transform-origin: center center; 361 -ms-transform-origin: center center; 362 transform-origin: center center; 363 -webkit-animation-name: shake-slow; 364 -ms-animation-name: shake-slow; 365 animation-name: shake-slow; 366 -webkit-animation-duration: 5s; 367 -ms-animation-duration: 5s; 368 animation-duration: 5s; 369 -webkit-animation-iteration-count: infinite; 370 -ms-animation-iteration-count: infinite; 371 animation-iteration-count: infinite; 372 -webkit-animation-timing-function: ease-in-out; 373 -ms-animation-timing-function: ease-in-out; 374 animation-timing-function: ease-in-out; 375 -webkit-animation-delay: 0s; 376 -ms-animation-delay: 0s; 377 animation-delay: 0s; 378 -webkit-animation-play-state: running; 379 -ms-animation-play-state: running; 380 animation-play-state: running; 381 } 382 383 /*#Header1_HeaderTitle:after {*/ 384 /*content: "......鎴戣嚜宸遍兘涓烘垜鑷�繁棰ゆ姈";*/ 385 /*font-weight: 400;*/ 386 /*line-height: 1;*/ 387 /*color: #777;*/ 388 /*font-size: 20px;*/ 389 /*}*/ 390 391 @-webkit-keyframes shake-slow { 392 0% { 393 -webkit-transform: translate(0px, 0px) rotate(0deg); 394 } 395 2% { 396 -webkit-transform: translate(-1px, 3px) rotate(-1.5deg); 397 } 398 4% { 399 -webkit-transform: translate(-4px, 5px) rotate(-1.5deg); 400 } 401 6% { 402 -webkit-transform: translate(-1px, 6px) rotate(-0.5deg); 403 } 404 8% { 405 -webkit-transform: translate(5px, -4px) rotate(-3.5deg); 406 } 407 10% { 408 -webkit-transform: translate(-7px, -3px) rotate(-3.5deg); 409 } 410 12% { 411 -webkit-transform: translate(-1px, 8px) rotate(2.5deg); 412 } 413 14% { 414 -webkit-transform: translate(3px, -5px) rotate(-1.5deg); 415 } 416 16% { 417 -webkit-transform: translate(1px, 0px) rotate(2.5deg); 418 } 419 18% { 420 -webkit-transform: translate(-6px, -10px) rotate(-0.5deg); 421 } 422 20% { 423 -webkit-transform: translate(3px, -2px) rotate(1.5deg); 424 } 425 22% { 426 -webkit-transform: translate(0px, 0px) rotate(-2.5deg); 427 } 428 24% { 429 -webkit-transform: translate(-5px, -4px) rotate(1.5deg); 430 } 431 26% { 432 -webkit-transform: translate(-1px, 3px) rotate(-3.5deg); 433 } 434 28% { 435 -webkit-transform: translate(1px, 1px) rotate(-3.5deg); 436 } 437 30% { 438 -webkit-transform: translate(-4px, 8px) rotate(1.5deg); 439 } 440 32% { 441 -webkit-transform: translate(-9px, 7px) rotate(-3.5deg); 442 } 443 34% { 444 -webkit-transform: translate(4px, -9px) rotate(-2.5deg); 445 } 446 36% { 447 -webkit-transform: translate(1px, -6px) rotate(-2.5deg); 448 } 449 38% { 450 -webkit-transform: translate(-4px, 0px) rotate(-2.5deg); 451 } 452 40% { 453 -webkit-transform: translate(3px, -7px) rotate(0.5deg); 454 } 455 42% { 456 -webkit-transform: translate(4px, 4px) rotate(-0.5deg); 457 } 458 44% { 459 -webkit-transform: translate(8px, -4px) rotate(-2.5deg); 460 } 461 46% { 462 -webkit-transform: translate(9px, 9px) rotate(-3.5deg); 463 } 464 48% { 465 -webkit-transform: translate(6px, -8px) rotate(-0.5deg); 466 } 467 50% { 468 -webkit-transform: translate(-1px, 4px) rotate(-3.5deg); 469 } 470 52% { 471 -webkit-transform: translate(4px, 6px) rotate(-1.5deg); 472 } 473 54% { 474 -webkit-transform: translate(9px, -3px) rotate(2.5deg); 475 } 476 56% { 477 -webkit-transform: translate(8px, -2px) rotate(-3.5deg); 478 } 479 58% { 480 -webkit-transform: translate(-2px, -9px) rotate(-0.5deg); 481 } 482 60% { 483 -webkit-transform: translate(-1px, -5px) rotate(2.5deg); 484 } 485 62% { 486 -webkit-transform: translate(-8px, 3px) rotate(2.5deg); 487 } 488 64% { 489 -webkit-transform: translate(6px, -2px) rotate(-3.5deg); 490 } 491 66% { 492 -webkit-transform: translate(-5px, 9px) rotate(-1.5deg); 493 } 494 68% { 495 -webkit-transform: translate(3px, 1px) rotate(-0.5deg); 496 } 497 70% { 498 -webkit-transform: translate(6px, 4px) rotate(-1.5deg); 499 } 500 72% { 501 -webkit-transform: translate(-6px, -5px) rotate(1.5deg); 502 } 503 74% { 504 -webkit-transform: translate(-8px, 0px) rotate(-0.5deg); 505 } 506 76% { 507 -webkit-transform: translate(-5px, -8px) rotate(1.5deg); 508 } 509 78% { 510 -webkit-transform: translate(5px, -3px) rotate(-1.5deg); 511 } 512 80% { 513 -webkit-transform: translate(-6px, -3px) rotate(-1.5deg); 514 } 515 82% { 516 -webkit-transform: translate(7px, 8px) rotate(-1.5deg); 517 } 518 84% { 519 -webkit-transform: translate(-6px, 9px) rotate(0.5deg); 520 } 521 86% { 522 -webkit-transform: translate(1px, 8px) rotate(-3.5deg); 523 } 524 88% { 525 -webkit-transform: translate(-9px, -2px) rotate(1.5deg); 526 } 527 90% { 528 -webkit-transform: translate(4px, -6px) rotate(-1.5deg); 529 } 530 92% { 531 -webkit-transform: translate(0px, -1px) rotate(0.5deg); 532 } 533 94% { 534 -webkit-transform: translate(2px, -9px) rotate(2.5deg); 535 } 536 96% { 537 -webkit-transform: translate(-9px, 1px) rotate(-2.5deg); 538 } 539 98% { 540 -webkit-transform: translate(-9px, -5px) rotate(-3.5deg); 541 } 542 } 543 544 @-ms-keyframes shake-slow { 545 0% { 546 -ms-transform: translate(0px, 0px) rotate(0deg); 547 } 548 2% { 549 -ms-transform: translate(-10px, 5px) rotate(-2.5deg); 550 } 551 4% { 552 -ms-transform: translate(7px, 7px) rotate(-3.5deg); 553 } 554 6% { 555 -ms-transform: translate(8px, -7px) rotate(-2.5deg); 556 } 557 8% { 558 -ms-transform: translate(-8px, 3px) rotate(-0.5deg); 559 } 560 10% { 561 -ms-transform: translate(3px, -10px) rotate(-1.5deg); 562 } 563 12% { 564 -ms-transform: translate(-9px, -6px) rotate(2.5deg); 565 } 566 14% { 567 -ms-transform: translate(-2px, -6px) rotate(-0.5deg); 568 } 569 16% { 570 -ms-transform: translate(6px, -1px) rotate(0.5deg); 571 } 572 18% { 573 -ms-transform: translate(5px, -1px) rotate(0.5deg); 574 } 575 20% { 576 -ms-transform: translate(7px, -5px) rotate(-0.5deg); 577 } 578 22% { 579 -ms-transform: translate(-8px, 5px) rotate(2.5deg); 580 } 581 24% { 582 -ms-transform: translate(0px, 4px) rotate(2.5deg); 583 } 584 26% { 585 -ms-transform: translate(-1px, 2px) rotate(-1.5deg); 586 } 587 28% { 588 -ms-transform: translate(-1px, -1px) rotate(1.5deg); 589 } 590 30% { 591 -ms-transform: translate(-5px, -5px) rotate(2.5deg); 592 } 593 32% { 594 -ms-transform: translate(0px, 7px) rotate(-0.5deg); 595 } 596 34% { 597 -ms-transform: translate(-9px, 3px) rotate(-0.5deg); 598 } 599 36% { 600 -ms-transform: translate(3px, -5px) rotate(-2.5deg); 601 } 602 38% { 603 -ms-transform: translate(5px, 2px) rotate(-0.5deg); 604 } 605 40% { 606 -ms-transform: translate(6px, -3px) rotate(0.5deg); 607 } 608 42% { 609 -ms-transform: translate(-4px, -6px) rotate(-0.5deg); 610 } 611 44% { 612 -ms-transform: translate(9px, 2px) rotate(-3.5deg); 613 } 614 46% { 615 -ms-transform: translate(6px, -4px) rotate(1.5deg); 616 } 617 48% { 618 -ms-transform: translate(6px, 5px) rotate(2.5deg); 619 } 620 50% { 621 -ms-transform: translate(-9px, -2px) rotate(-2.5deg); 622 } 623 52% { 624 -ms-transform: translate(-7px, 9px) rotate(-0.5deg); 625 } 626 54% { 627 -ms-transform: translate(-5px, -5px) rotate(-3.5deg); 628 } 629 56% { 630 -ms-transform: translate(-6px, -10px) rotate(1.5deg); 631 } 632 58% { 633 -ms-transform: translate(-3px, 1px) rotate(-3.5deg); 634 } 635 60% { 636 -ms-transform: translate(3px, 5px) rotate(2.5deg); 637 } 638 62% { 639 -ms-transform: translate(-1px, -8px) rotate(2.5deg); 640 } 641 64% { 642 -ms-transform: translate(6px, -7px) rotate(-0.5deg); 643 } 644 66% { 645 -ms-transform: translate(-7px, -1px) rotate(0.5deg); 646 } 647 68% { 648 -ms-transform: translate(-3px, -4px) rotate(-1.5deg); 649 } 650 70% { 651 -ms-transform: translate(-10px, 9px) rotate(2.5deg); 652 } 653 72% { 654 -ms-transform: translate(9px, 9px) rotate(2.5deg); 655 } 656 74% { 657 -ms-transform: translate(-6px, 8px) rotate(-0.5deg); 658 } 659 76% { 660 -ms-transform: translate(-5px, -10px) rotate(-2.5deg); 661 } 662 78% { 663 -ms-transform: translate(-7px, -9px) rotate(-0.5deg); 664 } 665 80% { 666 -ms-transform: translate(8px, -4px) rotate(2.5deg); 667 } 668 82% { 669 -ms-transform: translate(9px, 4px) rotate(-0.5deg); 670 } 671 84% { 672 -ms-transform: translate(-1px, -1px) rotate(2.5deg); 673 } 674 86% { 675 -ms-transform: translate(-6px, -3px) rotate(0.5deg); 676 } 677 88% { 678 -ms-transform: translate(-2px, -4px) rotate(0.5deg); 679 } 680 90% { 681 -ms-transform: translate(5px, 1px) rotate(0.5deg); 682 } 683 92% { 684 -ms-transform: translate(1px, 2px) rotate(-3.5deg); 685 } 686 94% { 687 -ms-transform: translate(-5px, -10px) rotate(1.5deg); 688 } 689 96% { 690 -ms-transform: translate(-6px, 3px) rotate(-3.5deg); 691 } 692 98% { 693 -ms-transform: translate(-1px, -7px) rotate(-2.5deg); 694 } 695 } 696 697 @keyframes shake-slow { 698 0% { 699 transform: translate(0px, 0px) rotate(0deg); 700 } 701 2% { 702 transform: translate(6px, -7px) rotate(2.5deg); 703 } 704 4% { 705 transform: translate(8px, -8px) rotate(2.5deg); 706 } 707 6% { 708 transform: translate(1px, -8px) rotate(-3.5deg); 709 } 710 8% { 711 transform: translate(-3px, 4px) rotate(-0.5deg); 712 } 713 10% { 714 transform: translate(0px, -3px) rotate(1.5deg); 715 } 716 12% { 717 transform: translate(-1px, 2px) rotate(0.5deg); 718 } 719 14% { 720 transform: translate(6px, 6px) rotate(-1.5deg); 721 } 722 16% { 723 transform: translate(-7px, 4px) rotate(-0.5deg); 724 } 725 18% { 726 transform: translate(7px, 8px) rotate(-3.5deg); 727 } 728 20% { 729 transform: translate(-6px, 2px) rotate(1.5deg); 730 } 731 22% { 732 transform: translate(9px, 5px) rotate(-1.5deg); 733 } 734 24% { 735 transform: translate(7px, -2px) rotate(0.5deg); 736 } 737 26% { 738 transform: translate(-7px, -10px) rotate(-0.5deg); 739 } 740 28% { 741 transform: translate(-10px, -8px) rotate(-1.5deg); 742 } 743 30% { 744 transform: translate(8px, 4px) rotate(0.5deg); 745 } 746 32% { 747 transform: translate(0px, 4px) rotate(1.5deg); 748 } 749 34% { 750 transform: translate(-8px, 6px) rotate(-0.5deg); 751 } 752 36% { 753 transform: translate(-5px, 7px) rotate(1.5deg); 754 } 755 38% { 756 transform: translate(-4px, -4px) rotate(-1.5deg); 757 } 758 40% { 759 transform: translate(9px, 4px) rotate(-1.5deg); 760 } 761 42% { 762 transform: translate(9px, -5px) rotate(2.5deg); 763 } 764 44% { 765 transform: translate(-5px, -4px) rotate(-2.5deg); 766 } 767 46% { 768 transform: translate(7px, -7px) rotate(1.5deg); 769 } 770 48% { 771 transform: translate(-5px, 8px) rotate(0.5deg); 772 } 773 50% { 774 transform: translate(9px, 1px) rotate(-1.5deg); 775 } 776 52% { 777 transform: translate(-9px, -5px) rotate(-3.5deg); 778 } 779 54% { 780 transform: translate(-2px, 9px) rotate(1.5deg); 781 } 782 56% { 783 transform: translate(6px, -1px) rotate(1.5deg); 784 } 785 58% { 786 transform: translate(-6px, 0px) rotate(-0.5deg); 787 } 788 60% { 789 transform: translate(3px, 1px) rotate(1.5deg); 790 } 791 62% { 792 transform: translate(5px, -7px) rotate(-0.5deg); 793 } 794 64% { 795 transform: translate(9px, 2px) rotate(2.5deg); 796 } 797 66% { 798 transform: translate(6px, 0px) rotate(-2.5deg); 799 } 800 68% { 801 transform: translate(5px, -4px) rotate(-2.5deg); 802 } 803 70% { 804 transform: translate(-8px, 5px) rotate(-2.5deg); 805 } 806 72% { 807 transform: translate(-6px, -2px) rotate(0.5deg); 808 } 809 74% { 810 transform: translate(-3px, 7px) rotate(-3.5deg); 811 } 812 76% { 813 transform: translate(-7px, -8px) rotate(-3.5deg); 814 } 815 78% { 816 transform: translate(-1px, -2px) rotate(2.5deg); 817 } 818 80% { 819 transform: translate(8px, 6px) rotate(-2.5deg); 820 } 821 82% { 822 transform: translate(-2px, -9px) rotate(2.5deg); 823 } 824 84% { 825 transform: translate(8px, -10px) rotate(-0.5deg); 826 } 827 86% { 828 transform: translate(-6px, 0px) rotate(2.5deg); 829 } 830 88% { 831 transform: translate(-1px, 9px) rotate(-3.5deg); 832 } 833 90% { 834 transform: translate(-7px, 8px) rotate(1.5deg); 835 } 836 92% { 837 transform: translate(-10px, -8px) rotate(0.5deg); 838 } 839 94% { 840 transform: translate(-8px, 6px) rotate(1.5deg); 841 } 842 96% { 843 transform: translate(4px, -9px) rotate(2.5deg); 844 } 845 98% { 846 transform: translate(-4px, 9px) rotate(0.5deg); 847 } 848 } 849 850 /* 姝ｆ枃 - 鏍囬�棰ゆ姈 */ 851 852 /* 姝ｆ枃 - 璇勮� */ 853 854 div#blog-comments-placeholder { 855 background-color: #fff; 856 border-radius: 4px; 857 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); 858 margin-bottom: 30px; 859 min-height: 20px; 860 padding: 30px 20px 10px 20px; 861 position: relative; 862 } 863 864 .feedbackItem { 865 border-radius: 5px; 866 box-shadow: 0px 0px 8px #7999; 867 margin: 20px 0; 868 padding: 10px 30px 40px 30px; 869 } 870 871 .feedbackCon { 872 padding: 20px 13px 10px 0; 873 } 874 875 .feedbackListSubtitle { 876 padding: 30px 0; 877 } 878 879 .feedbackManage { 880 float: right; 881 } 882 883 .feedbackManage a { 884 padding: 5px 8px !important; 885 font-size: 90%; 886 color: #c7254e !important; 887 background-color: #f9f2f4; 888 border-radius: 4px; 889 margin-right: 10px; 890 transition: 0.3s; 891 -webkit-transition: 0.3s; 892 } 893 894 .feedbackManage a:hover { 895 color: #ffffff !important; 896 background-color: #2196f3a3 !important; 897 border: 0; 898 } 899 900 input#tbCommentAuthor { 901 border-radius: 4px; 902 } 903 904 div#comment_form { 905 padding: 0 20px; 906 } 907 908 .commentbox_title { 909 width: 100%; 910 } 911 912 div.commentform textarea.comment_textarea { 913 line-height: 1.6; 914 width: 100%; 915 border-radius: 4px; 916 box-shadow: 0px 0px 5px #999; 917 } 918 919 /* 姝ｆ枃 - 璇勮� */ 920 921 /* 渚ц竟鏍� */ 922 923 #main { 924 position: relative; 925 } 926 927 #sideBar { 928 position: absolute; 929 overflow: hidden; 930 overflow-y: auto; 931 background: #262a30; 932 width: 280px; 933 height: 100%; 934 font-size: 14px; 935 color: #999; 936 padding: 0 10px; 937 } 938 939 #sideBar a { 940 color: #999; 941 line-height: 1.7; 942 } 943 944 #sideBar a:hover { 945 color: #87daff; 946 } 947 948 #sideBar li { 949 list-style: none; 950 } 951 952 #sideBar h3 { 953 font-weight: bold; 954 margin-bottom: 12px; 955 color: #61afef; 956 border-bottom-width: 1px; 957 border-bottom-style: outset; 958 border-bottom-color: #D4D4D4; 959 padding-bottom: 10px; 960 margin-top: 20px; 961 } 962 963 #sideBar ul { 964 padding: 0; 965 } 966 967 #navCategory li ul { 968 padding-left: 10px 969 } 970 971 div#blog-calendar { 972 padding: 30px 20% 30px 10%; 973 } 974 975 /* 渚ц竟鏍� */ 976 977 /* 鐪嬫澘濞� */ 978 979 canvas#live2dcanvas { 980 border: 0 !important; 981 left: 0; 982 } 983 984 /* 鐪嬫澘濞� */ 985 986 /* 鍏煎� */ 987 .cnblogs_code_toolbar { 988 display: none; 989 } 990 991 @media screen and (max- 1000px) { 992 993 div#comment_form * { 994 max-width: 100%; 995 } 996 997 #sideBar, #blog_stats { 998 display: none; 999 } 1000 1001 #mainContent, .forFlow { 1002 margin: 0; 1003 padding: 0; 1004 border: 0; 1005 } 1006 1007 .forFlow { 1008 padding: 0 20px; 1009 } 1010 1011 ul#navList { 1012 margin-right: 0; 1013 } 1014 1015 blockquote { 1016 margin: 10px 0; 1017 padding: 10px 0; 1018 } 1019 1020 div#live2d-widget { 1021 display: none; 1022 } 1023 1024 div#cnblogs_post_body { 1025 box-shadow: none; 1026 border-radius: 0; 1027 background: transparent; 1028 padding: 0; 1029 margin: 0; 1030 border: 0; 1031 } 1032 }
JS样式
1 <script src="https://blog-static.cnblogs.com/files/yyhh/L2Dwidget.min.js"></script> 2 3 <script type="text/javascript"> 4 L2Dwidget.init(); 5 </script> 6 7 <script type="text/javascript"> 8 // 鐢熸垚鐩�綍绱㈠紩鍒楄〃 9 // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html 10 // modified by: zzq 11 function GenerateContentList() { 12 var mainContent = $('#cnblogs_post_body'); 13 var h2_list = $('#cnblogs_post_body h2'); //濡傛灉浣犵殑绔犺妭鏍囬�涓嶆槸h2,鍙�渶瑕佸皢杩欓噷鐨刪2鎹㈡帀鍗冲彲 14 15 if (mainContent.length < 1) 16 return; 17 18 if (h2_list.length > 0) { 19 var content = '<a id="_labelTop"></a>'; 20 content += '<div id="navCategory">'; 21 content += '<h3>闃呰�鐩�綍</h3>'; 22 content += '<ul>'; 23 for (var i = 0; i < h2_list.length; i++) { 24 var go_to_top = '<div id="_label' + i + '"></div>'; 25 $(h2_list[i]).before(go_to_top); 26 27 var h3_list = $(h2_list[i]).nextAll("h3"); 28 var li3_content = ''; 29 for (var j = 0; j < h3_list.length; j++) { 30 var tmp = $(h3_list[j]).prevAll('h2').first(); 31 if (!tmp.is(h2_list[i])) 32 break; 33 var li3_anchor = '<div id="_label' + i + '_' + j + '"></div>'; 34 $(h3_list[j]).before(li3_anchor); 35 li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>'; 36 } 37 38 var li2_content = ''; 39 if (li3_content.length > 0) 40 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>'; 41 else 42 li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>'; 43 content += li2_content; 44 } 45 content += '</ul></div>'; 46 if ($('#cnblogs_post_body').length != 0) { 47 $($('#sideBar')[0]).prepend(content); 48 } 49 } 50 } 51 GenerateContentList(); 52 </script>
原作者：https://home.cnblogs.com/u/yyhh/