zoukankan      html  css  js  c++  java
  • 设置侧边栏动态漫画

    应园友询问  共享

    设置====》博客设置====》

    博客皮肤  ===  BlackLowKey

    页面定制CSS代码  ====  

    /* 鍏ㄥ眬 */
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
        color: #555 !important;
        font-family: "Microsoft YaHei";
    }
    
    #home, #sideBar{
        height: 100%;
    }
    
    #main {
        min-height: 1800px;
    }
    
    a {
        text-decoration: none;
        padding-bottom: 2px;
        color: #e06c75;
        -webkit-transition: 0.3s;
    }
    
    a:hover {
        /*border-bottom: 1px solid;*/
        color: #fff;
        text-shadow: -1px 0 0 #1487cc, 0 1px 0 #1487cc, 1px 0 0 #1487cc, 0 -1px 0 #1487cc;
        -webkit-transition: 0.3s;
    }
    
    table * {
        margin: 0 !important;
    }
    
    /* 鍏ㄥ眬 */
    
    /* 瀵艰埅 */
    div#header {
        width: 100%;
        position: absolute;
        height: 60px;
        z-index: 999;
    }
    
    div#blogTitle {
        display: none;
    }
    
    ul#navList {
        list-style: none;
        float: right;
        margin-right: 50px;
    }
    
    ul#navList li {
        float: left;
        display: inline;
        padding-left: 20px;
    
    }
    
    ul#navList li a {
        font-size: 12px;
    }
    
    .blogStats {
        font-size: 9px;
        left: 370px;
        top: 40px;
        color: #555;
        position: absolute;
    }
    
    /* 瀵艰埅 */
    
    /* 姝f枃 - 鏂囩珷鍒楄〃 */
    
    #mainContent {
        float: left;
        width: 100%;
        /*padding-left: 320px;*/
        padding-top: 60px;
    }
    
    .forFlow {
        max-width: 100%;
        margin: 0 auto;
        margin-left: 370px;
        margin-right: 50px;
    }
    
    .dayTitle {
        display: none;
    }
    
    .forFlow {
        border-top: solid 1px #ccc;
    }
    
    .postTitle, .entrylistPosttitle {
        background-image: url(//images.cnblogs.com/cnblogs_com/sgtb/641997/o_55.png);
        background-repeat: no-repeat;
        background-position: left center;
        font-size: 22px;
        font-weight: bold;
        padding: 40px;
    }
    
    .postCon, .entrylistPostSummary {
        font-size: 14px;
        color: #444;
        line-height: 1.8;
        padding-left: 20px;
    }
    
    .postDesc, .entrylistItemPostDesc {
        text-align: right;
        font-size: 15px;
        color: #999;
        padding-top: 20px;
        padding-bottom: 40px;
        border-bottom: solid 1px #ccc;
    }
    
    .entrylistDescription {
        /*border-bottom: solid 1px #ccc;;
        margin-left: 20px;
        margin-right: 20px;*/
    }
    
    /* 姝f枃 - 鏂囩珷鍒楄〃 */
    
    /* 姝f枃 - 鏂囩珷 */
    
    #cnblogs_post_body img {
        max-width: 100% !important;
        height: auto;
    }
    
    blockquote {
        background: none;
        border: 0;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    h1, h2, h3, h4, h5, h6, p{
        line-height: 2 !important;
        margin: 30px 0 15px !important;
    }
    
    img, pre {
        line-height: 2 !important;
    }
    
    
    code {
        margin: 10px 0 20px 0;
        border-radius: 5px;
        box-shadow: 0px 0px 3px #999;
    }
    
    #cnblogs_post_body img {
        max-width: 100%;
        height: auto;
        margin: 10px 0 20px 0;
        border-radius: 5px;
        box-shadow: 0px 0px 8px #999;
    }
    
    #cnblogs_post_body pre {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    
    #cnblogs_post_body table * {
        margin: 0 !important;
    }
    
    #cnblogs_post_body table img {
        box-shadow: none;
        border-radius: 0;
    }
    
    #cnblogs_post_body table {
        width: 100% !important;
        border: 0 !important;
        margin: 20px 0 50px 0;
        border-collapse: collapse;
        border-spacing: 0;
        line-height: 40px;
        border-radius: 8px;
        box-shadow: 0px 0px 5px #999;
    }
    
    #cnblogs_post_body table th {
        background: #73b1e0;
        font-weight: 800;
        font-size: 18px;
        line-height: 50px;
        color: #FFF;
        padding: 5px 20px 5px 20px;
        text-align: left;
    }
    
    #cnblogs_post_body table tr:nth-child(odd) {
        background: #F4F4F4;
    }
    
    #cnblogs_post_body table tr:hover,
    #cnblogs_post_body table td:hover {
        background: #badbf5;
    }
    
    #cnblogs_post_body table a {
        color: #000;
    }
    
    #cnblogs_post_body table td, table th {
        /*border: 1px solid #EEE !important;*/
        border: 0 !important;
        padding: 5px 10px 5px 10px
    }
    
    #cnblogs_post_body table tr:first-child th:first-child {
        border-top-left-radius: 3px;
    }
    
    #cnblogs_post_body table tr:first-child th:last-child {
        border-top-right-radius: 3px;
    }
    
    #cnblogs_post_body table tr:last-child td:first-child {
        border-bottom-left-radius: 3px;
    }
    
    #cnblogs_post_body table tr:last-child td:last-child {
        border-bottom-right-radius: 3px;
    }
    
    /*
    
    Atom One Dark by Daniel Gamage
    Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
    
    base:    #282c34
    mono-1:  #abb2bf
    mono-2:  #818896
    mono-3:  #5c6370
    hue-1:   #56b6c2
    hue-2:   #61aeee
    hue-3:   #c678dd
    hue-4:   #98c379
    hue-5:   #e06c75
    hue-5-2: #be5046
    hue-6:   #d19a66
    hue-6-2: #e6c07b
    
    */
    
    .cnblogs-markdown code.hljs,
    .cnblogs-post-body code.hljs,
    .hljs {
        display: block !important;
        overflow-x: auto !important;
        padding: 1em !important;
        color: #abb2bf !important;
        background: #282c34 !important;
        font-size: 14px !important;
        font-family: "Microsoft YaHei" !important;
    }
    
    .hljs-comment,
    .hljs-quote {
        color: #5c6370 !important;
        font-style: italic !important;
    }
    
    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
        color: #c678dd !important;
    }
    
    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
        color: #e06c75 !important;
    }
    
    .hljs-literal {
        color: #56b6c2 !important;
    }
    
    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string {
        color: #98c379 !important;
    }
    
    .hljs-built_in,
    .hljs-class .hljs-title {
        color: #e6c07b !important;
    }
    
    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
        color: #d19a66 !important;
    }
    
    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
        color: #61aeee !important;
    }
    
    .hljs-emphasis {
        font-style: italic;
    }
    
    .hljs-strong {
        font-weight: bold;
    }
    
    .hljs-link {
        text-decoration: underline;
    }
    
    /* 姝f枃 - 鏂囩珷 */
    
    /* 姝f枃 - 鏍囬�棰ゆ姈 */
    
    h1.postTitle {
        font-size: 30px;
        font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif;
        font-weight: 500;
        padding: 0;
        background-image: none;
        display: inline-block;
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-name: shake-slow;
        -ms-animation-name: shake-slow;
        animation-name: shake-slow;
        -webkit-animation-duration: 5s;
        -ms-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 0s;
        -ms-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
    }
    
    /*#Header1_HeaderTitle:after {*/
        /*content: "......鎴戣嚜宸遍兘涓烘垜鑷�繁棰ゆ姈";*/
        /*font-weight: 400;*/
        /*line-height: 1;*/
        /*color: #777;*/
        /*font-size: 20px;*/
    /*}*/
    
    @-webkit-keyframes shake-slow {
        0% {
            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            -webkit-transform: translate(-1px, 3px) rotate(-1.5deg);
        }
        4% {
            -webkit-transform: translate(-4px, 5px) rotate(-1.5deg);
        }
        6% {
            -webkit-transform: translate(-1px, 6px) rotate(-0.5deg);
        }
        8% {
            -webkit-transform: translate(5px, -4px) rotate(-3.5deg);
        }
        10% {
            -webkit-transform: translate(-7px, -3px) rotate(-3.5deg);
        }
        12% {
            -webkit-transform: translate(-1px, 8px) rotate(2.5deg);
        }
        14% {
            -webkit-transform: translate(3px, -5px) rotate(-1.5deg);
        }
        16% {
            -webkit-transform: translate(1px, 0px) rotate(2.5deg);
        }
        18% {
            -webkit-transform: translate(-6px, -10px) rotate(-0.5deg);
        }
        20% {
            -webkit-transform: translate(3px, -2px) rotate(1.5deg);
        }
        22% {
            -webkit-transform: translate(0px, 0px) rotate(-2.5deg);
        }
        24% {
            -webkit-transform: translate(-5px, -4px) rotate(1.5deg);
        }
        26% {
            -webkit-transform: translate(-1px, 3px) rotate(-3.5deg);
        }
        28% {
            -webkit-transform: translate(1px, 1px) rotate(-3.5deg);
        }
        30% {
            -webkit-transform: translate(-4px, 8px) rotate(1.5deg);
        }
        32% {
            -webkit-transform: translate(-9px, 7px) rotate(-3.5deg);
        }
        34% {
            -webkit-transform: translate(4px, -9px) rotate(-2.5deg);
        }
        36% {
            -webkit-transform: translate(1px, -6px) rotate(-2.5deg);
        }
        38% {
            -webkit-transform: translate(-4px, 0px) rotate(-2.5deg);
        }
        40% {
            -webkit-transform: translate(3px, -7px) rotate(0.5deg);
        }
        42% {
            -webkit-transform: translate(4px, 4px) rotate(-0.5deg);
        }
        44% {
            -webkit-transform: translate(8px, -4px) rotate(-2.5deg);
        }
        46% {
            -webkit-transform: translate(9px, 9px) rotate(-3.5deg);
        }
        48% {
            -webkit-transform: translate(6px, -8px) rotate(-0.5deg);
        }
        50% {
            -webkit-transform: translate(-1px, 4px) rotate(-3.5deg);
        }
        52% {
            -webkit-transform: translate(4px, 6px) rotate(-1.5deg);
        }
        54% {
            -webkit-transform: translate(9px, -3px) rotate(2.5deg);
        }
        56% {
            -webkit-transform: translate(8px, -2px) rotate(-3.5deg);
        }
        58% {
            -webkit-transform: translate(-2px, -9px) rotate(-0.5deg);
        }
        60% {
            -webkit-transform: translate(-1px, -5px) rotate(2.5deg);
        }
        62% {
            -webkit-transform: translate(-8px, 3px) rotate(2.5deg);
        }
        64% {
            -webkit-transform: translate(6px, -2px) rotate(-3.5deg);
        }
        66% {
            -webkit-transform: translate(-5px, 9px) rotate(-1.5deg);
        }
        68% {
            -webkit-transform: translate(3px, 1px) rotate(-0.5deg);
        }
        70% {
            -webkit-transform: translate(6px, 4px) rotate(-1.5deg);
        }
        72% {
            -webkit-transform: translate(-6px, -5px) rotate(1.5deg);
        }
        74% {
            -webkit-transform: translate(-8px, 0px) rotate(-0.5deg);
        }
        76% {
            -webkit-transform: translate(-5px, -8px) rotate(1.5deg);
        }
        78% {
            -webkit-transform: translate(5px, -3px) rotate(-1.5deg);
        }
        80% {
            -webkit-transform: translate(-6px, -3px) rotate(-1.5deg);
        }
        82% {
            -webkit-transform: translate(7px, 8px) rotate(-1.5deg);
        }
        84% {
            -webkit-transform: translate(-6px, 9px) rotate(0.5deg);
        }
        86% {
            -webkit-transform: translate(1px, 8px) rotate(-3.5deg);
        }
        88% {
            -webkit-transform: translate(-9px, -2px) rotate(1.5deg);
        }
        90% {
            -webkit-transform: translate(4px, -6px) rotate(-1.5deg);
        }
        92% {
            -webkit-transform: translate(0px, -1px) rotate(0.5deg);
        }
        94% {
            -webkit-transform: translate(2px, -9px) rotate(2.5deg);
        }
        96% {
            -webkit-transform: translate(-9px, 1px) rotate(-2.5deg);
        }
        98% {
            -webkit-transform: translate(-9px, -5px) rotate(-3.5deg);
        }
    }
    
    @-ms-keyframes shake-slow {
        0% {
            -ms-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            -ms-transform: translate(-10px, 5px) rotate(-2.5deg);
        }
        4% {
            -ms-transform: translate(7px, 7px) rotate(-3.5deg);
        }
        6% {
            -ms-transform: translate(8px, -7px) rotate(-2.5deg);
        }
        8% {
            -ms-transform: translate(-8px, 3px) rotate(-0.5deg);
        }
        10% {
            -ms-transform: translate(3px, -10px) rotate(-1.5deg);
        }
        12% {
            -ms-transform: translate(-9px, -6px) rotate(2.5deg);
        }
        14% {
            -ms-transform: translate(-2px, -6px) rotate(-0.5deg);
        }
        16% {
            -ms-transform: translate(6px, -1px) rotate(0.5deg);
        }
        18% {
            -ms-transform: translate(5px, -1px) rotate(0.5deg);
        }
        20% {
            -ms-transform: translate(7px, -5px) rotate(-0.5deg);
        }
        22% {
            -ms-transform: translate(-8px, 5px) rotate(2.5deg);
        }
        24% {
            -ms-transform: translate(0px, 4px) rotate(2.5deg);
        }
        26% {
            -ms-transform: translate(-1px, 2px) rotate(-1.5deg);
        }
        28% {
            -ms-transform: translate(-1px, -1px) rotate(1.5deg);
        }
        30% {
            -ms-transform: translate(-5px, -5px) rotate(2.5deg);
        }
        32% {
            -ms-transform: translate(0px, 7px) rotate(-0.5deg);
        }
        34% {
            -ms-transform: translate(-9px, 3px) rotate(-0.5deg);
        }
        36% {
            -ms-transform: translate(3px, -5px) rotate(-2.5deg);
        }
        38% {
            -ms-transform: translate(5px, 2px) rotate(-0.5deg);
        }
        40% {
            -ms-transform: translate(6px, -3px) rotate(0.5deg);
        }
        42% {
            -ms-transform: translate(-4px, -6px) rotate(-0.5deg);
        }
        44% {
            -ms-transform: translate(9px, 2px) rotate(-3.5deg);
        }
        46% {
            -ms-transform: translate(6px, -4px) rotate(1.5deg);
        }
        48% {
            -ms-transform: translate(6px, 5px) rotate(2.5deg);
        }
        50% {
            -ms-transform: translate(-9px, -2px) rotate(-2.5deg);
        }
        52% {
            -ms-transform: translate(-7px, 9px) rotate(-0.5deg);
        }
        54% {
            -ms-transform: translate(-5px, -5px) rotate(-3.5deg);
        }
        56% {
            -ms-transform: translate(-6px, -10px) rotate(1.5deg);
        }
        58% {
            -ms-transform: translate(-3px, 1px) rotate(-3.5deg);
        }
        60% {
            -ms-transform: translate(3px, 5px) rotate(2.5deg);
        }
        62% {
            -ms-transform: translate(-1px, -8px) rotate(2.5deg);
        }
        64% {
            -ms-transform: translate(6px, -7px) rotate(-0.5deg);
        }
        66% {
            -ms-transform: translate(-7px, -1px) rotate(0.5deg);
        }
        68% {
            -ms-transform: translate(-3px, -4px) rotate(-1.5deg);
        }
        70% {
            -ms-transform: translate(-10px, 9px) rotate(2.5deg);
        }
        72% {
            -ms-transform: translate(9px, 9px) rotate(2.5deg);
        }
        74% {
            -ms-transform: translate(-6px, 8px) rotate(-0.5deg);
        }
        76% {
            -ms-transform: translate(-5px, -10px) rotate(-2.5deg);
        }
        78% {
            -ms-transform: translate(-7px, -9px) rotate(-0.5deg);
        }
        80% {
            -ms-transform: translate(8px, -4px) rotate(2.5deg);
        }
        82% {
            -ms-transform: translate(9px, 4px) rotate(-0.5deg);
        }
        84% {
            -ms-transform: translate(-1px, -1px) rotate(2.5deg);
        }
        86% {
            -ms-transform: translate(-6px, -3px) rotate(0.5deg);
        }
        88% {
            -ms-transform: translate(-2px, -4px) rotate(0.5deg);
        }
        90% {
            -ms-transform: translate(5px, 1px) rotate(0.5deg);
        }
        92% {
            -ms-transform: translate(1px, 2px) rotate(-3.5deg);
        }
        94% {
            -ms-transform: translate(-5px, -10px) rotate(1.5deg);
        }
        96% {
            -ms-transform: translate(-6px, 3px) rotate(-3.5deg);
        }
        98% {
            -ms-transform: translate(-1px, -7px) rotate(-2.5deg);
        }
    }
    
    @keyframes shake-slow {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        2% {
            transform: translate(6px, -7px) rotate(2.5deg);
        }
        4% {
            transform: translate(8px, -8px) rotate(2.5deg);
        }
        6% {
            transform: translate(1px, -8px) rotate(-3.5deg);
        }
        8% {
            transform: translate(-3px, 4px) rotate(-0.5deg);
        }
        10% {
            transform: translate(0px, -3px) rotate(1.5deg);
        }
        12% {
            transform: translate(-1px, 2px) rotate(0.5deg);
        }
        14% {
            transform: translate(6px, 6px) rotate(-1.5deg);
        }
        16% {
            transform: translate(-7px, 4px) rotate(-0.5deg);
        }
        18% {
            transform: translate(7px, 8px) rotate(-3.5deg);
        }
        20% {
            transform: translate(-6px, 2px) rotate(1.5deg);
        }
        22% {
            transform: translate(9px, 5px) rotate(-1.5deg);
        }
        24% {
            transform: translate(7px, -2px) rotate(0.5deg);
        }
        26% {
            transform: translate(-7px, -10px) rotate(-0.5deg);
        }
        28% {
            transform: translate(-10px, -8px) rotate(-1.5deg);
        }
        30% {
            transform: translate(8px, 4px) rotate(0.5deg);
        }
        32% {
            transform: translate(0px, 4px) rotate(1.5deg);
        }
        34% {
            transform: translate(-8px, 6px) rotate(-0.5deg);
        }
        36% {
            transform: translate(-5px, 7px) rotate(1.5deg);
        }
        38% {
            transform: translate(-4px, -4px) rotate(-1.5deg);
        }
        40% {
            transform: translate(9px, 4px) rotate(-1.5deg);
        }
        42% {
            transform: translate(9px, -5px) rotate(2.5deg);
        }
        44% {
            transform: translate(-5px, -4px) rotate(-2.5deg);
        }
        46% {
            transform: translate(7px, -7px) rotate(1.5deg);
        }
        48% {
            transform: translate(-5px, 8px) rotate(0.5deg);
        }
        50% {
            transform: translate(9px, 1px) rotate(-1.5deg);
        }
        52% {
            transform: translate(-9px, -5px) rotate(-3.5deg);
        }
        54% {
            transform: translate(-2px, 9px) rotate(1.5deg);
        }
        56% {
            transform: translate(6px, -1px) rotate(1.5deg);
        }
        58% {
            transform: translate(-6px, 0px) rotate(-0.5deg);
        }
        60% {
            transform: translate(3px, 1px) rotate(1.5deg);
        }
        62% {
            transform: translate(5px, -7px) rotate(-0.5deg);
        }
        64% {
            transform: translate(9px, 2px) rotate(2.5deg);
        }
        66% {
            transform: translate(6px, 0px) rotate(-2.5deg);
        }
        68% {
            transform: translate(5px, -4px) rotate(-2.5deg);
        }
        70% {
            transform: translate(-8px, 5px) rotate(-2.5deg);
        }
        72% {
            transform: translate(-6px, -2px) rotate(0.5deg);
        }
        74% {
            transform: translate(-3px, 7px) rotate(-3.5deg);
        }
        76% {
            transform: translate(-7px, -8px) rotate(-3.5deg);
        }
        78% {
            transform: translate(-1px, -2px) rotate(2.5deg);
        }
        80% {
            transform: translate(8px, 6px) rotate(-2.5deg);
        }
        82% {
            transform: translate(-2px, -9px) rotate(2.5deg);
        }
        84% {
            transform: translate(8px, -10px) rotate(-0.5deg);
        }
        86% {
            transform: translate(-6px, 0px) rotate(2.5deg);
        }
        88% {
            transform: translate(-1px, 9px) rotate(-3.5deg);
        }
        90% {
            transform: translate(-7px, 8px) rotate(1.5deg);
        }
        92% {
            transform: translate(-10px, -8px) rotate(0.5deg);
        }
        94% {
            transform: translate(-8px, 6px) rotate(1.5deg);
        }
        96% {
            transform: translate(4px, -9px) rotate(2.5deg);
        }
        98% {
            transform: translate(-4px, 9px) rotate(0.5deg);
        }
    }
    
    /* 姝f枃 - 鏍囬�棰ゆ姈 */
    
    /* 姝f枃 - 璇勮� */
    
    div#blog-comments-placeholder {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
        margin-bottom: 30px;
        min-height: 20px;
        padding: 30px 20px 10px 20px;
        position: relative;
    }
    
    .feedbackItem {
        border-radius: 5px;
        box-shadow: 0px 0px 8px #7999;
        margin: 20px 0;
        padding: 10px 30px 40px 30px;
    }
    
    .feedbackCon {
        padding: 20px 13px 10px 0;
    }
    
    .feedbackListSubtitle {
        padding: 30px 0;
    }
    
    .feedbackManage {
        float: right;
    }
    
    .feedbackManage a {
        padding: 5px 8px !important;
        font-size: 90%;
        color: #c7254e !important;
        background-color: #f9f2f4;
        border-radius: 4px;
        margin-right: 10px;
        transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    
    .feedbackManage a:hover {
        color: #ffffff !important;
        background-color: #2196f3a3 !important;
        border: 0;
    }
    
    input#tbCommentAuthor {
        border-radius: 4px;
    }
    
    div#comment_form {
        padding: 0 20px;
    }
    
    .commentbox_title {
        width: 100%;
    }
    
    div.commentform textarea.comment_textarea {
        line-height: 1.6;
        width: 100%;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #999;
    }
    
    /* 姝f枃 - 璇勮� */
    
    /* 渚ц竟鏍� */
    
    #main {
        position: relative;
    }
    div#sidebar_search_box .input_my_zzk {
        width: 209px ! important;
    }
    #sideBar {
        position: absolute;
        overflow: hidden;
        overflow-y: auto;
        background: #262a30;
        width: 280px;
        height: 100%;
        font-size: 14px;
        color: #999;
        padding: 0 10px;
    }
    
    #sideBar a {
        color: #999;
        line-height: 1.7;
    }
    
    #sideBar a:hover {
        color: #87daff;
    }
    
    #sideBar li {
        list-style: none;
    }
    
    #sideBar h3 {
        font-weight: bold;
        margin-bottom: 12px;
        color: #61afef;
        border-bottom-width: 1px;
        border-bottom-style: outset;
        border-bottom-color: #D4D4D4;
        padding-bottom: 10px;
        margin-top: 20px;
    }
    
    #sideBar ul {
        padding: 0;
    }
    
    #navCategory li ul {
        padding-left: 10px
    }
    
    div#blog-calendar {
        padding: 30px -1% 30px 10%;
    }
    
    /* 渚ц竟鏍� */
    
    /* 鐪嬫澘濞� */
    
    canvas#live2dcanvas {
        border: 0 !important;
        left: 0;
    }
    
    /* 鐪嬫澘濞� */
    
    /* 鍏煎� */
    .cnblogs_code_toolbar {
        display: none;
    }
    
    @media screen and (max- 1000px) {
    
        div#comment_form * {
            max-width: 100%;
        }
    
        #sideBar, #blog_stats {
            display: none;
        }
    
        #mainContent, .forFlow {
            margin: 0;
            padding: 0;
            border: 0;
        }
    
        .forFlow {
            padding: 0 20px;
        }
    
        ul#navList {
            margin-right: 0;
        }
    
        blockquote {
            margin: 10px 0;
            padding: 10px 0;
        }
    
        div#live2d-widget {
            display: none;
        }
    
        div#cnblogs_post_body {
            box-shadow: none;
            border-radius: 0;
            background: transparent;
            padding: 0;
            margin: 0;
            border: 0;
        }
        #blogCalendar{
           margin-left:-32px ! important ;
    }
        #widget_my_zzk input{
          width:210px;
        }
    
    }

      勾选禁用模板默认css 

      博客侧边栏公告(支持HTML代码)(支持JS代码)

    <script src="https://blog-static.cnblogs.com/files/yyhh/L2Dwidget.min.js"></script>
     
     <script type="text/javascript">
     L2Dwidget.init();
     </script>
     
     <script type="text/javascript">
     // 鐢熸垚鐩�綍绱㈠紩鍒楄〃
     // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
     // modified by: zzq
     function GenerateContentList() {
         var mainContent = $('#cnblogs_post_body');
         var h2_list = $('#cnblogs_post_body h2'); //濡傛灉浣犵殑绔犺妭鏍囬�涓嶆槸h2,鍙�渶瑕佸皢杩欓噷鐨刪2鎹㈡帀鍗冲彲
     
         if (mainContent.length < 1)
            return;
    
         if (h2_list.length > 0) {
             var content = '<a id="_labelTop"></a>';
             content += '<div id="navCategory">';
             content += '<h3>闃呰�鐩�綍</h3>';
             content += '<ul>';
             for (var i = 0; i < h2_list.length; i++) {
                 var go_to_top = '<div id="_label' + i + '"></div>';
                 $(h2_list[i]).before(go_to_top);
     
                var h3_list = $(h2_list[i]).nextAll("h3");
                 var li3_content = '';
                 for (var j = 0; j < h3_list.length; j++) {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                     if (!tmp.is(h2_list[i]))
                         break;
                     var li3_anchor = '<div id="_label' + i + '_' + j + '"></div>';
                     $(h3_list[j]).before(li3_anchor);
                     li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
                }
     
                 var li2_content = '';
                 if (li3_content.length > 0)
                     li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
                 else
                     li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
                 content += li2_content;
             }
            content += '</ul></div>';
            if ($('#cnblogs_post_body').length != 0) {
                 $($('#sideBar')[0]).prepend(content);
            }
         }
     }
     GenerateContentList();
     </script>

    保存刷新即可

  • 相关阅读:
    同花顺笔试碰到的一道前端编程题
    闭包会造成内存泄漏吗?
    动态添加和删除节点元素,函数封装
    58同城2018校招前端笔试题总结
    拼多多2018提前批前端笔试总结
    根据字符串字符的个数排序输出
    ES6数组对象新增方法
    【转】浅析BFC及其作用
    《具体数学》学习笔记
    KMP总结
  • 原文地址:https://www.cnblogs.com/xikui/p/11792454.html
Copyright © 2011-2022 走看看