本博客CSS

Update 2021-01-06 : 现在的博皮请见 awescnb

感谢@羊毛羊大佬的帮助

CSS

代码样式1

.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
    font-size: 15px!important;
    box-shadow: inset 0 0 9px black;
    border-radius: 10px 10px 10px 10px !important;
    margin-top: 0px;
    margin-bottom: 0px;
}
pre {
    white-space: pre;
    word-wrap: normal;
} .cnblogs-markdown .hljs {
    font-size: 14px!important;
    font-family: consolas,monospace !important;
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background:rgba(0, 0, 0, .8) !important;
    color:#fff !important;
    white-space: pre;
    word-break: normal;
    padding: 10px 15px !important;
    tab-size: 34px;
} .hljs, .hljs-tag, .hljs-subst {
  color: #f8f8f2;
} .hljs-strong, .hljs-emphasis {
  color: #a8a8a2;
} .hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link {
  color: #FFD700;
} .hljs-code, .hljs-title, .hljs-section, .hljs-selector-class {
  color: #1E90FF;
} .hljs-strong {
  font-weight: bold;
} .hljs-emphasis {
  font-style: italic;
} .hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr {
  color: #ae81ff;
} .hljs-symbol, .hljs-attribute {
  color: #66d9ef;
} .hljs-params, .hljs-class .hljs-title {
  color: #f5871f;
} .hljs-string, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-addition, .hljs-variable, .hljs-template-variable {
  color: #74E22D;
} .hljs-comment, .hljs-deletion, .hljs-meta {
  color: #FF8C00;
}.hljs-ln-n {
    text-align: right;
    padding-right: 8px;
}

@keyframes slidein {
    from {
        top: 100px;
        opacity: 0;
    }

    to {
        top: 0px;
        opacity: 1;
    }
}

@-webkit-keyframes slidein {
    from {
        top: 100px;
        opacity: 0;
    }

    to {
        top: 0px;
        opacity: 1;
    }
}


.reading-main {
    animation: slidein .25s;
    -webkit-animation: slidein .25s;
}

标题样式

// 标题样式
#cnblogs_post_body h1, .blog_comment_body h1 {
    font-size: 40px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h2, .blog_comment_body h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}
#cnblogs_post_body h3, .blog_comment_body h4 {
    font-size: 21px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}
#cnblogs_post_body h4, .blog_comment_body h4 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}
#cnblogs_post_body h5, .blog_comment_body h5 {
    font-size: 15px;
    font-weight: bold;
    margin: 10px 0;
}

添加三个点

/*添加三个点*/
#blog-comments-placeholder pre:before, #cnblogs_post_body pre:before {
    content: " ";
    display: block;
    height: 26px;
    background: url(https://img2020.cnblogs.com/blog/2015669/202011/2015669-20201119233248638-1075693467.png) no-repeat;
    background-size: 65px 23px;
    background-position-x: 15px;
    background-color: lightgray;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

<style>
:after, :before {
    margin-right: .5em;
}
<style>
:after, :before {
    font-family: Font Awesome 5 free,Font Awesome 5 Brands;
    font-weight: 700;
}

添加 copy 按钮

/*添加按钮*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
    position: absolute;
    top: 1px;
    right: 1px;
    border-radius: 8px;
    padding: 0 10px;
    font-size: 12px;
    background: rgb(45 45 45);
    color: #fff;
    cursor: pointer;
    display: none;
    font-family: Consolas;
}
.cnblogs-markdown pre:hover > span {
  display:block;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}

并在页脚 js 里加上

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://files.cnblogs.com/files/cjl-world/cp.js"></script>

文末转页

/*文末转页*/
#post_next_prev {
    font-size: 18px;
    display: inline-block;
}

#post_next_prev a:nth-of-type(2n) {
    height: 35px;
    display: inline-block;
    font-size: 24px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

#post_next_prev a:nth-of-type(2n):before {
    position: absolute;
     30px;
    content: "";
    background: url(//images.cnblogs.com/cnblogs_com/812-xiao-wen/1333714/o_082257221093724.png) no-repeat left 11px;
    height: 35px;
    display: inline-block;
    background-size: 24px 24px;
    overflow: visible;
    opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

#post_next_prev a:hover {
    color: #1E90FF !important;
    text-decoration: none !important;
}

#post_next_prev a:nth-of-type(2n):hover {
    transform: translateX(35px);
    -webkit-transform: translateX(35px);
    -moz-transform: translateX(35px);
}

#post_next_prev a:nth-of-type(2n):hover:before {
    transform: translateX(-35px);
    -webkit-transform: translateX(-35px);
    -moz-transform: translateX(-35px);
    opacity: 1;
}

#post_next_prev a.p_n_p_prefix:link {
    display: none;
}

其他

#topics .postTitle {
    border: 0;
    font-size: 200%;
    font-weight: bold;
    float: left;
    line-height: 1.5;
     100%;
    padding-left: 5px;
}

#home {
    margin: 0 auto;
     80%;/*原始65*/
    min- 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.9);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgba(245, 245, 245, 0.9) url('https://img2020.cnblogs.com/blog/2015669/202006/2015669-20200612210754735-1223339267.jpg') fixed no-repeat;   //修改背景图片
    background-position-x: initial;
    background-position-y: initial;
    background-size: 100%100%;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: rgba(245, 245, 245, 0.9);
    font-size: 18px !important;
    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-text-size-adjust: none;
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: #e1e1e1;
    margin-bottom: 35px;
    word-wrap: break-word;
}
.CalDayHeader {
    background: #e2e1e1;
    font-weight: 100;
    color: #5e5f63;
}
.CalTitle td {
    background: #e2e1e1 !important;
    border: 0 !important;
    color: #5e5f63;
    font-family: "Comic Sans MS";
}
.postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: none !important;
    color: #069;
}
.postCon a:link, .postCon a:visited, .postCon a:active {
    text-decoration: none !important;
    color: #069;
}
.postBody li, .postCon li {
    list-style-type: disc;
    margin-bottom: 0.5em;
}
.cnblogs-markdown code, .cnblogs-post-body code {
    font-family: "Consolas",sans-serif!important;
    font-size: 14px !important;
    line-height: 20px;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 0 5px !important;
    border-radius: 3px !important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
    overflow-x: auto;
}
#sideBar h3 {
    font-size: 14px;
}
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 10px 0 14px 10px;
    background-color: #f5f5f5;
}
.catListTitle {
    font-weight: bold;
    line-height: 1.2;
    font-size: 110%;
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
* {
    margin: 0;
    padding: 0;
}
user agent stylesheet
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
#sideBar h3 {
    font-size: 16px;
}
#sideBar a {
    color: #757575;
    font-size: 15px;
}
#blogTitle h1 a {
    color: #515151;
    font-size: 40px;
    font-family: Consolas;
}
#sideBar {
    font-size: 15px;
}
#navList a {
    display: block;
     5em;
    height: 22px;
    float: left;
    text-align: center;
    padding-top: 19px;
    font-size: larger;
}
.postBody li, .postCon li {
    list-style-type: disc;
    margin-bottom: 0.5em;
    font-size: 16px;
}
#cnblogs_post_body p {
    margin: 10px auto;
    text-indent: 0;
    font-size: 16px;
}
.vertical-middle>* {
    vertical-align: middle;
    font-size: 23px;
}
.blogpost-body blockquote {
    background: none;
    border-left: 6px solid #ccc;
    border-right: none;
    border-top: none;
    border-bottom: none;
    margin: 10px 0;
    padding: 5px 10px;
    color: #555;
}
/*文末分享关注按钮*/
#green_channel {
    padding: 5px 0 15px 0;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 0;
    border-top: #eee 1px dashed;
    border-bottom: #eee 1px dashed;
    font-size: 12px;
     100% !important;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

a#green_channel_digg, 
a#green_channel_follow, 
a#green_channel_favorite, 
a#green_channel_weibo, 
a#green_channel_wechat {
    text-decoration: none;
    color: #fff;
    margin: auto;
     80px;
    display: inline-block;
    line-height: 30px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    border-radius: 3px;
    text-transform: uppercase;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    position: relative;
    background-image: none;
    margin-top: 10px;
}

a#green_channel_digg:hover, 
a#green_channel_follow:hover, 
a#green_channel_favorite:hover, 
a#green_channel_weibo:hover, 
a#green_channel_wechat:hover {
    transform: scale(1.02,1.02);
}

a#green_channel_digg:active, 
a#green_channel_follow:active, 
a#green_channel_favorite:active, 
a#green_channel_weibo:active, 
a#green_channel_wechat:active {
    transform: scale(0.95,0.95);
    transition: all 0.4s -0.125s;
}

a#green_channel_digg {
    background-color: #2daebf;
    box-shadow: 0px 15px 18px -6px rgba(95,193,206, 0.65);
}

a#green_channel_follow {
    background-color: #e33100 !important;
    box-shadow: 0px 15px 18px -6px rgba(227,49,0, 0.65);
    margin-left: 10px;
}

a#green_channel_favorite {
    background-color: #ffb515;
    box-shadow: 0px 15px 18px -6px rgba(255,198,75, 0.65);
    margin-left: 10px;
}

a#green_channel_weibo {
    padding: 3px 8px !important;
    background-color: #FF464B !important;
    box-shadow: 0px 15px 18px -6px rgba(255,70,75, 0.65) !important;
    margin-left: 10px;
     35px;
}

a#green_channel_wechat {
    padding: 3px 8px !important;
    background-color: #3CB034 !important;
    box-shadow: 0px 15px 18px -6px rgba(60,176,52, 0.65) !important;
    margin-left: 10px;
     35px;
}

/*文末作者*/
#author_profile_info img.author_avatar {
    border-radius: 100%;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
    border: 3px solid #f7f7f7;
    padding: 0;
    margin-left: 3px;
    margin-right: 7px;
}

#author_profile {
    display: none;
}

/*文末转页*/
#post_next_prev {
    font-size: 18px;
    display: inline-block;
}

#post_next_prev a:nth-of-type(2n) {
    height: 35px;
    display: inline-block;
    font-size: 24px;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

#post_next_prev a:nth-of-type(2n):before {
    position: absolute;
     30px;
    content: "";
    background: url(//images.cnblogs.com/cnblogs_com/812-xiao-wen/1333714/o_082257221093724.png) no-repeat left 11px;
    height: 35px;
    display: inline-block;
    background-size: 24px 24px;
    overflow: visible;
    opacity: 0;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

#post_next_prev a:hover {
    color: #1E90FF !important;
    text-decoration: none !important;
}

#post_next_prev a:nth-of-type(2n):hover {
    transform: translateX(35px);
    -webkit-transform: translateX(35px);
    -moz-transform: translateX(35px);
}

#post_next_prev a:nth-of-type(2n):hover:before {
    transform: translateX(-35px);
    -webkit-transform: translateX(-35px);
    -moz-transform: translateX(-35px);
    opacity: 1;
}

#post_next_prev a.p_n_p_prefix:link {
    display: none;
}

/*文末文章信息*/
#post_detail .postDesc {
    background-color: hsla(0, 0%, 100%, .4);
    color: #9fa4a4;
    text-align: center;
    font-size: 14px;
    line-height: 2.8125rem;
}

#post_detail .postDesc a {
    color: #9fa4a4;
    font-size: 1em;
}

#HistoryToday, .recomm-block {
    max- 0px!important;
    height: 0px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#commentform_title a {
    font-size: 0px!important;
}
.under-comment-box-nav ul {
    margin-left: 5px;
    font-size: 0px;
}

链接高亮

/* 链接高亮 */
.postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: none;
}
.postBody a:link,
.postBody a:visited{color: #21759b;}
.postBody a:hover,
.postBody a:active{
color: #0c5495;}
/* 链接高亮结束 */

pre {
    overflow: hidden!important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

页脚html

去广告

<style>
        #cnblogs_c1,
        #cnblogs_c2,
        #ad_t2,
        #opt_under_post
        {
            display: none !important;
        }
        .itnews,
        .c_ad_block
        {
            display: none !important;
        }
</style>

参考文章

• https://blog.csdn.net/qq_42052818/article/details/87788659
• https://www.cnblogs.com/y-m-y/p/12237693.html
• https://www.cnblogs.com/wuliytTaotao/p/11752754.html