本博客的样式改造之路

本博客的样式改造之路

本博客地址：https://www.cnblogs.com/kjgym/

一、打好基础

本博客基础皮肤样式选用博客皮肤darkgreentrip，并在此皮肤基础上，进行改造，其中大多数代码取自网络。

二、权限

自己申请js权限

三、页面定制 CSS 代码

html {
    background-color: #eee;
}
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
body{    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1.5s;/*动画持续时间*/  
    -webkit-animation:fade-in 1.5s;/*针对webkit内核*/  
}  
a{
    transition: all .3s ease!important
}
a:link {
    color: #444;
}

a:visited {
    color: #444;
}

a:hover,#blog_post_info_block a:hover,.postDesc a:hover,#comment_nav a:hover {
    color: #2D8CF0;
}
#leftcontentcontainer a{
    font-size: 14px;
}
#leftcontentcontainer a:hover{
    font-size:20px !important;
}
.postBody a{
    text-decoration: none !important;
    color: #2196F3;
}
.postBody a:hover{
    text-decoration:none;
    color: #64B5F6;
}
body {
    background-color: #eee;
    background: url('//') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
    color: #505050;
    min-height: 100%;
    font-family: Georgia,"Times New Roman",Times,sans-serif !important;
}
#navList a {
    font-family: unset;
}
#home {
    margin: 0 auto;
     70%;
    /*原始65*/
    /*页面顶部的宽度*/
    background-color: rgb(238, 238, 238);
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#main {
    padding-top: 0px;
    min- 0px;
}

#blogTitle {
    height: auto;
    /*高度*/
    clear: both;
}

.forFlow {
    transition: all 0.5s linear 0s;
}

#blogTitle {
    background: #eeeeee;
}

#blogTitle h1 a {
    font-family: Lato,"Microsoft Jhenghei","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.5em;
    /*原始 1.6em*/
    margin-top: 10px;
    /*原始 15px */
    color: #333;
    /*去掉下划线*/
    text-decoration: none;
}

#blogTitle h1 a:hover {
    color: #03A9F4;
/*     margin-left: 10px; */
}

#blogTitle > h2 {
    font-size: 17px !important;
    /*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #263238;
    display:  none;
    font-weight: 200;
    text-align: right;
    float: right;
     100%;
    transition: all 0.5s linear 0s;
}

#blogTitle > h2:hover {
    color: #111;
    margin-right: 10px;
}

#navigator {
    background-color: #eee;
    height: 60px;
}

/* 导航条 */
#navList a:link, #navList a:visited, #navList a:active {
    color: #111;
    font-size: 18px;
    font-weight: 500;
}

#navList a:hover {
    color: white;
    background-color: #343434;
    text-decoration: none;
    text-shadow: 0px 0px 0px 0px #fff;
}
ul#navList {
    height: 100%;
     auto;
}
.blogStats {
    color: #212121;
     18%;
}

.postTitle {
    border-left: 0px solid #666;
    font-size: 18px !important;
    float: right;
    border- 0px;
     100%;
    clear: both;
    margin: 0 0 0 0px;
}

#topics > div > h1 {
     95% !important;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #222;
    font-size: 20px;
    transition: all 0.4s l*inear 0s;
}

.postTitle a:hover {
    margin-left: 30px;
    color: #2196F3;
    text-decoration: none;
}

.postCon {
    float: right;
    line-height: 1.5em;
     100%;
    clear: both;
    color: #4d4d4d;
    padding: 0px 0;
}

.day .postTitle a {
    padding-left: 0px;
    font-size: 1.3em;
    font-weight: 500;
    color: #111;
    padding-bottom: 2px;
}
.day .postTitle a:hover {
    color: #2196F3;
}
.day {
    background: rgb(238, 238, 238);
    box-shadow:  0 0 0;
    margin-bottom: 0;
}

/*文章附加信息*/
.postDesc {
    font-weight: 100;
    line-height: 1.5;
    padding-top: 0px;
    padding-bottom: 0px;
    font-family: unset;
    clear: both;
    color: #555 !important;
    font-size: 0.8em;
    /*5px  padding-left: 90px;posted 发表时间左边距离*/
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #424242;
    font-weight: 500;
}
.postDesc a:hover{
    color: #03A9F4;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar {
    background: rgb(238, 238, 238);
    word-wrap: break-word;
    margin-bottom: 0;
    box-shadow: 0 0 0 0;
}
#sidebar_postcategory > ul > li,#TopViewPostsBlock > ul > li,#TopFeedbackPostsBlock > ul > li,#TopDiggPostsBlock > ul > li {
    border: 0px;
}
.CalTitle {
    background: rgba(255, 255, 255, 0);
}

.CalTodayDay {
    /**今天日期样式**/
    color: #14242b;
}

.catListTitle {
    border-bottom: 0px solid #eee;
    padding: 0 0 10px 0;
    text-align: left;
    color: #666;
    text-shadow: 0 0 0px;
    padding-left: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACYElEQVQ4T63Uz2vUQBQH8PedtJoJ6AaEXkU9eChC/wMX7UFaqvTmSY8FKTks3UmKKIuHbrLpoS34owiKVCgFvYgHT2J/+Bu8CCIieFHB26J006KdJ1MaSbvZVMQcJ28+897Lm4D+8wPjRVF0GkClwGYAQbVafbnb+Ztgo9F4QkT3AbzN26C17iOiKwDKSqk3RWia4XNmrgZBsBLH8RlmXldKPcpubDQa55h5CkB/EboNBNBjOgDAtW37iOd537NoGIZnAVwrQreBlmU1tdYrRPQtSZLeWq32a2d5BhVCXNVal4MgaGtRW8lhGB5zHOeD53nrnXoVx/Gw1nqWmU/uRNvA3b5i+t6gzHxDCHF8bGzsfbr+z6ABwjAcBHDTsqwTKZqOzRIRLSqlLhVlGMfxIdM73/dvp3EGFULMbmxslMfHxz+mYB8zPzaz5vv+VB46MTFxwLKsVwBmlFLTaUytVtvjOM4zInqhlBrdBLfS7wWw3AmNomgewGelVDWLSSkfENG+7u7u/kqlkvwBU1QIYW7NZaXUdbMWx3EPM8+1Wq0h27alEOKO1tpbW1v7KqV8CGBvV1fXgMFM/DZw614fBWBmcRONomhaCPFudXV1znGcJWZ+7bqu12w27wHYb9v2qeyItYEZ1GR6USl1a2ttEcCXUql0vhOWm2Han3q9ftiyrKcGBbCgtb4gpZxJkuQuEZWklEN5w5+bYRYVQiwSUZAkybyUcsFgrusOjoyM/MybhkLQbJicnDyotV5m5k9E9MN13eFOWGHJ2dPNQDOz32q1RvN+GNnYXTP827udxv0GjLQoJE1niEMAAAAASUVORK5CYII=) no-repeat scroll 0 50%;
    font-weight: 100;
}

#topics {
    border-bottom: 0px solid #616161;
    background-color: #eeeeee;
    padding-top: 0px;
    box-shadow: 0 0 0 0;
    font-size: 15px;
}

.c_ad_block {
    display: none;
}

#tbCommentBody {
     100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.5);
}

#q {
    background: rgba(255, 255, 255, 0);
    border-radius: 5px;
}

.CalNextPrev {
    background: rgba(255, 255, 255, 0);
}

/* 图片样式 */
#cnblogs_post_body img {
     auto;
    height: auto;
    max- 100%;
}

/*---字体颜色----*/
/*引用*/
.postBody blockquote {
    color: unset;
    border-radius: 1px;
    font-size: 15px;
    background-color: #e8e8e8;
    border-1px;
    border-left: 5px solid #9E9E9E;
}

p {
    font-size: 1.03em;
    line-height: 2em;
}

h2 {
    font-size: 1.6em !important;
    line-height: 2.5em !important;
    border-bottom: 0px solid #BDBDBD;
}

h3 {
    font-size: 1.4em !important;
    line-height: 2.5em !important;
}

h4 {
    font-size: 1.2em !important;
}

h5 {
    font-size: 1em !important;
}

h2,h3,h4,h5 {
    font-family: Lato,"Microsoft Jhenghei","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color: transparent;
    background-color : black;
    text-shadow : rgba(12, 12, 12, 0.48) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
    -webkit-background-clip : text;
}

/*公告栏*/
div#profile_block {
    color: #4d4d4d;
}

input#btnZzk {
    border- 0px;
    padding: 5px 5px 20px 5px;
    color: #fff;
    border-radius: 5px;
    background-color: #42A5F5;
}

input#btnZzk:hover {
    color: #2196F3;
}

#profile_block a {
    /*去掉下划线*/
    text-decoration: none;
    color: #444;
}

#profile_block a:hover {
    /*去掉下划线*/
    text-decoration: none;
    color: #2196F3;
}

.postBody li {
    font-size: 15px;
    line-height: 2em;
}

.postBody {
    color: #111;
    padding-top: 0px;
}

th {
    min- 100px;
}

div#sidebar_search {
    background: #fff;
    border-radius: 10px;
}

div#sideBar {
    transition: all 0.5s linear 0s;
    border-right: 1px solid #e3e5e6;
}

#footer {
    min-height: 0px;
    border-top: 1px solid #f3f3f3;
    background-color: #fff0;
    margin-top: 5px;
    padding-top: 0px;
    font-size: 12px;
    margin-bottom: 0px;
}

#BlogPostCategory {
    font-size: 15px;
    font-weight: 500;
    color: #666;
}

#post_next_prev {
    font-size: 14px;
    font-weight: 500;
    font-family: unset;
    color: #969696;
}

/*---代码块样式---*/
/*makedown行间代码样式 */
.cnblogs-markdown code {
    color: #c7254e;
    border: none !important;
    font-size: 1em !important;
    background-color: #f9f2f4 !important;
    font-family: sans-serif !important;
}
pre {
/*控制代码不换行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
  font-family: Source code pro, Consolas,Inconsolata,Courier,monospace !important;
font-size: 14px !important;
  display: block!important;
  overflow-x: auto!important;
  padding: 0.5em !important;
  background: #272822 !important;
  color: #ddd !important;
}

.cnblogs-markdown .hljs * {  font-size: 14px !important; }

.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
  color: #f92672 !important;
}

.hljs-code {
  color: #66d9ef !important;
}

.hljs-class .hljs-title {
  color: white !important;
}

.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
  color: #bf79db !important;
}

.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: #a6e22e !important;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
  color: #75715e !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
  font-weight: bold !important;
}

/* 定制公告栏时钟位置 */
#clockdiv {
    text-align: center;
}

/*目录样式*/
#sideCatalog a {
    font-size: 12px;
    font-weight: normal !important;
}

/*好看的滚动条*/
::-webkit-scrollbar {
     8px!important;
    height: 8px!important;
    -webkit-appearance: none;
}

::-webkit-scrollbar-thumb {
    height: 5px;
    border: 1px solid transparent;
    border-top: none;
    border-bottom: none;
    -webkit-border-radius: 6px;
    background-color: #9e9e9e;
    background-clip: padding-box;
}

/*删除点赞按钮*/
#div_digg {
    display: none !important;
}

/* 删除反对按钮 */
.buryit {
    display: none;
}

/*仿简书按钮*/
/*底部*/
#green_channel {
     100% !important;
    display: none;
}

/*自定义按钮分享*/
#channel {
    padding: 10px 0;
    margin-bottom: 10px;
    margin-top: 10px;
    border: silver 0px dashed;
    font-size: 12px;
     100%;
    padding-top: 20px;
    text-align: center;
}
/* 共同的 */
.btn-pay {
    transition: all 0.2s linear 0s;
    padding: 8px 20px;
    font-size: 15px;
    display: unset;
    color: #fff;
    border-radius: 5px;
}

.btnz {
     fit-content;
    margin: 0 auto;
    background-color: #F44336;
}

.btnz:hover {
    background-color: #C62828;
}

.btng {
    background-color: #18b566;
     2%;
    margin-right: 8px;
}

.btng:hover {
    background-color: #1B5E20;
}

.btns {
    background-color: #FF5722;
    margin-right: 8px;
     2%;
}

.btns:hover {
    background-color: #BF360C;
}

.btnd {
    background-color: #2196F3;
    margin-right: 8px;
     10%;
}

.btnd:hover {
    background-color: #1565C0;
}

#zanp {
    padding: 0 30px;
    margin-bottom: 20px;
    min-height: 24px;
    font-size: 17px;
    margin-top: 15px;
    font-weight: 700;
    color: #969696;
}

a.weibo,a.wechat {
    box-shadow: none;
    background: none;
    text-shadow: none;
    /*border: 1px solid #dcdcdc !important;*/
    padding: 20px 9px 4px 9px;
    border-radius: 50%;
}

a.wechat > img {
     24px;
}

/*作者栏*/
#author_profile {
    float: left;
     100% !important;
    border-radius: 4px;
    display: none;
}

/*底部头像旋转*/
.author_avatar {
    border-radius: 37px;
    -webkit-transition: transform .4s linear;
    -moz-transition: transform .4s linear;
    -o-transition: transform .4s linear;
    transition: transform .4s linear;
}

.author_avatar:hover {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -moz-transform: rotate(360deg);
    /* Firefox */
    -webkit-transform: rotate(360deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(360deg);
    /* Opera */
}

/*分类颜色*/
#blog_post_info_block a {
    color: #2196F3;
    text-decoration: none;
}
#blog_post_info_block a:hover {
    color: #64B5F6;
}

/*提交评论*/
.comment_btn {
    border- 0px;
    padding: 5px 5px 25px 5px;
    color: #fff;
    border-radius: 5px;
    background-color: #2196F3;
}
.comment_btn:hover {
    background-color: #54abf1;
}
.commentbox_title_right {
    float:  left;
}
div#comment_form {
    height: auto;
    background-color: #eeeeee;
}
#comment_nav a {
    text-decoration:  none;
    color: #424242;
}

#commentbox_opt > a {
    color: #424242;
}
#commentbox_opt > a:hover {
    color: #2196F3;
    text-decoration:none;
}

#comment_form_container > p:nth-child(4) {
    color: #9E9E9E;
}

.commentbox_title_left {
    color: #9E9E9E;
    display:  none;
}

#comment_form_container > p:nth-child(8) {
    color: #9E9E9E;
}

/*评论*/
div#blog-comments-placeholder {
    border: none;
}
#comment_form {
    font-family:unset !important;
}

#comment_form_container > p:nth-child(4) {
    display: none;
}

div#commentform_title {
    border-bottom: 0px;
}

/*设置几个div默认为隐藏状态*/
/*目录*/
#sideToolbar {
    display: none;
}

/*广告*/
#ad_t2 {
    display: none;
}

/*版权声明*/
div#MySignature {
    display: block;
    color: #696969;
    padding: 0px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 30px;
}

#MySignature > div > p {
    text-indent: 10px;
    line-height: 1em;
    color: #111;
}

.esa-post-signature {
    padding: 20px 10px 20px 20px;
    margin-top: 5px;
    position: relative;
    margin-left: 5px;
    border-left- 4px;
    font-size: 14px;
    line-height: 2;
    font-family: Lato,"Microsoft Jhenghei","Hiragino Sans GB","Microsoft YaHei",sans-serif!important;
    border-left-style: solid;
    background-color: #F5F5F5;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    border-left-color: #f66;
}

.esa-post-signature:before {
    content: "!";
    background-color: #f66;
    position: absolute;
    left: -12px;
    color: #fff;
     20px;
    height: 20px;
    border-radius: 100%;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
    font-size: 14px;
}

.esa-post-signature a {
    color: unset;
    text-decoration: none !important;
}

.esa-post-signature a:hover {
    color: #ff6666 !important;
}
/*阅读全文*/
a.c_b_p_desc_readmore {
    border:  0px solid;
    border-color: #9E9E9E;
    border-radius: 3px;
    margin:1px;
    color: #111;
    padding: 1px;
    text-decoration: none !important;
}
a.c_b_p_desc_readmore:hover {
    border-color: #03A9F4;
    color:#03A9F4;
}
/*评论模板*/
.feedback_area_title {
  padding:10px;
  font-size: 1em;
  font-weight:bold;
  color: #424242;
  padding-top:  0px;
  margin-top: 0px;
  border-bottom:1px dashed #ccc;
}
.feedbackListSubtitle {
  font-size:12px;
}
.comment_quote {
  background: #eee;
  padding: 15px;
  border: 1px dashed #aaa;
  border-radius: 5px;
}
#commentform_title {
  color: #424242;
  background-image:none;
  background-repeat:no-repeat;
  margin-bottom: 5px;
  padding: 10px 10px 0px 5px;
  font-size: 1em;
  font-weight:bold;
  border-bottom:1px dashed #ccc;
}
#comment_form {
  margin:10px 0;
  padding: 0px;
  border-radius: 10px;
  height: 343px;
  overflow: hidden;
  border- 3px;
  border-color: #171515;
  border-bottom-color:  #000;
  border- 50px;
}
.commentform {
  margin:10px 0;
  padding:10px 20px;
  background: #FFF;
}
#tbCommentBody {
  font-family:'MIcrosoft Yahei';
  margin-top:10px;
  background:white;
  color:#333;
  border:2px solid #fff;
  box-shadow:inset 0 0 8px #aaa;
  height:120px;
  font-size:14px;
  min-height:120px;
  border-radius: 10px;
  outline:none;
}
.feedbackItem {
  font-size:14px;
  line-height:24px;
  margin: 0 0;
  padding: 10px;
  padding-top:5px;
  padding-bottom: 0px;
}
.feedbackListSubtitle {
  font-weight:normal;
}

.blog_comment_body > img.user-avatar {
    position: absolute;
    left: -72px;
    top: 0px;
     48px;
    height: 48px;
}
.myself .blog_comment_body > img.user-avatar {
    left: initial;
    right: -72px;
}
#blog-comments-placeholder {
    border: solid 1px #CCC;
    border-radius: 5px;
}
div#comments_pager_top {
    display: none;
}
#blog-comments-placeholder > br {
    display: none;
}
/* 修改删除 */
.feedbackManage {
     auto;
}
.feedbackItem:hover .feedbackManage {
    display: block;
}
/* 隐藏评论删除按钮 */
div.feedbackListSubtitle > div > span > a:nth-child(3) {
/*     display:  none; */
}
.feedbackItem a {
    color: unset !important;
    text-decoration:none;
}
.feedbackItem a:hover {
    color: #03A9F4 !important;
}

.feedbackCon {
    background: none;
    clear: both;
    border-bottom: 1px solid #e1e1ee;
    margin: 10px 0 0 5px;
    padding-top:  0px;
}

.feedbackListSubtitle a.layer {
    background: #8BC34A;
    color: #414141 !important;
    padding: 2px 4px;
    border-radius: 2px;
    margin-right: 4px;
    /*display: none;*/
}

.feedbackListSubtitle a[target="_blank"] {
    color: #F44336 !important;
}

.feedbackItem .comment_date {
    color: #424242;
    margin-right: 4px;
}

.feedbackListSubtitle {
    color: #424242;
}
/* 支持反对 */
.comment_vote {
    float: right;
    display: none;
}
.feedbackItem:hover .comment_vote {
    display: none;
}
.feedbackItem {
    color: #464646;
    position: relative;
}
.blog_comment_body {
    background: #B2E866;
    float: left;
    padding: 8px 12px;
    border-radius: 10px;
    position: relative;
    overflow: visible;
    margin-left: 33px;
    word-spacing: inherit;
    max- 500px;
}

.blog_comment_body:before {
    content: '';
    display: block;
    position: absolute;
    left: -17px;
    top: 9px;
     0;
    height: 0;
    border-right: solid 18px #B2E866;
    border-top: solid 6px rgba(0, 0, 0, 0);
    border-bottom: solid 10px rgba(0, 0, 0, 0);
}
.blog_comment_body:after {
    content: attr(data-louceng);
    display: none;
     48px;
    height: 48px;
    position: absolute;
    left: -72px;
    top: 0px;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.42);
    font-family: 'Microsoft Yahei';
    background: linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%);
    background: -o-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%);
    background: -ms-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%);
    background: -moz-linear-gradient(top , rgb(116, 218, 45) 12% , rgb(135, 255, 75) 35% , rgb(71, 179, 28) 86%);
    background: -webkit-linear-gradient(top , #74DA2D 12% , #87FF4B 35% , #47B31C 86%);
    background-size: contain;
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+0) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_00.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+1) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_01.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+2) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_02.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+3) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_03.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+4) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_04.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+5) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_05.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+6) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_06.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+7) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_07.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+8) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_08.bmp);
}
#blog-comments-placeholder .feedbackItem:nth-child(10n+9) .blog_comment_body:after {
    background-image: url(//files.cnblogs.com/files/liuxianan/auto_avatar_09.bmp);
}

.feedbackCon:after {
    content: '';
    display: block;
    clear: both;
}
.comment_quote {
    border: 1px solid #63921F;
    border-radius: 3px;
}
/* 私信 */
.myself .sendMsg2This {
    padding-left: 0px;
     16px;
    margin-top: 4px;
    height: 14px;
    margin-left:  1px;
    float: inherit;
}

.myself .blog_comment_body {
    float: right;
    margin-right: 72px;
    background: #98DDFF;
}
.myself .blog_comment_body:before {
    right: -17px;
    left: initial;
    border-left: solid 18px #98DDFF;
    border-right: none;
}
.myself .blog_comment_body:after {
    content: '';
    display: none;
     48px;
    height: 48px;
    background-image: url(//pic.cnblogs.com/avatar/352797/20160108090502.png) !important;
    background-size: contain;
    position: absolute;
    right: -72px;
    top: 0px;
    left: initial;
}
.myself .feedbackCon{
	margin: 10px 0 0 0px;
}
.myself .comment_vote {
    float: left;
    margin-left: -20px;
}
.myself .comment_quote {
    border: 1px solid #4491B7;
}
.myself .feedbackListSubtitle {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}
.myself .feedbackListSubtitle a.layer {
    display: inline-block;
}
.myself .feedbackManage {
    left: 75px;
    right: initial;
    top: 8px;
    padding-top:2px;
}
.feedbackCon img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.feedbackCon img {
    border-radius: 40px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
/* 结束 */

/*以下锚点*/
#sideToolbar {
	position: fixed;
	bottom: -12px;
	right: 25px;
	 250px;
	height: 440px
}
#sideCatalog{
	background-color: #eee;
	padding-bottom:10px;
	border-radius:5px;
}
#sideCatalog-sidebar {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background-color: #eaeaea;
	border-color: -moz-use-text-color #eaeaea;
	border-image: none;
	border-left: 1px solid #eaeaea;
	border-right: 1px solid #eaeaea;
	border-style: none solid;
	border- 0 1px;
	height: 353px;
	left: 5px;
	position: absolute;
	top: 0;
	 0
}
#sideCatalog-catalog {
	height: 325px;
	padding-top: 18px;
	overflow-x: hidden;
	overflow-y: scroll;
	padding-left: 23px;
	position: relative
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
	cursor: pointer;
	top: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
	bottom: 0
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll 0 -199px transparent;
	height: 10px;
	left: -5px;
	overflow: hidden;
	position: absolute;
	 10px
}
#sideCatalog li {
	margin: 0px;
	padding: 4px 7px;
	text-align: left;
	position: relative
}
#sideCatalog li: hover {
	background-color: #f5f5f5
}
#sideCatalog-catalog ul .active {
	background-color: #f5f5f5
}
#sideCatalog-catalog .active a {
	color: #519cea
}
#sideCatalog-catalog a: hover {
	color: #519cea
}
#sideCatalog span: first-child {
	color: #999;
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	padding-right: 5px
}
#sideCatalog li.h2Offset {
	padding-left: 35px;
	text-indent: -25px
}
#sideCatalog li.h3Offset {
	padding-left: 65px;
	text-indent: -45px
}
#sideCatalog li.h4Offset {
	padding-left: 80px;
	text-indent: -55px
}
#sideCatalog a {
	text-decoration: none;
	color: #424242;
	font-weight: bold;
}
.sideCatalog-dot {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") repeat scroll 0 -222px transparent;
	cursor: pointer;
	font-size: 12px;
	height: 10px;
	left: -10px;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	top: 4px;
	 6px
}
#sideCatalog .highlight .sideCatalog-dot {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -271px -38px transparent;
	height: 13px;
	left: -23px;
	top: 3px;
	 18px
}
#sideCatalogBtn {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	display: block;
	height: 45px;
	margin-bottom: 5px;
	margin-left: 5px;
	position: relative;
	 45px;
	margin-top: 10px;
	outline: 0
}
#sideCatalogBtn:hover {	
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -154px 0 transparent;
	
}

#sideToolbar-up {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent;
	border-radius: 2px;
	display: block;
	height: 45px;
	margin-left: 5px;
	 45px;
	outline: 0
}
#sideToolbar-up:hover {
	background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent
}
#div_digg{
	z-index: 999;
}
/*自定义新的目录按钮*/
#mulu{
background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -104px 0 transparent;
 45px;
height: 45px;
overflow: hidden;
position: fixed;
right: 220px;
bottom: 20px;
cursor: pointer;
display:none;
z-index: 999;
}

#mulu:hover{
background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -154px 0 transparent;
}
/*以上是锚点*/
/*以下是返回顶部*/

#gotop{
background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -1px -62px transparent !important;
 45px;
height: 45px;
overflow: hidden;
position: fixed;
right: 166px;
bottom: 20px;
cursor: pointer;
display:none;
z-index: 999;
}

#gotop:hover{
background: url("//images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sideToolbar.png") no-repeat scroll -74px -62px transparent !important;
}

/*以上是返回顶部*/

四、博客侧边栏公告

暂无，需要者自己研究去。

五、页首 HTML 代码

<canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
 
<script src="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>

六、页脚 HTML 代码

<script language="javascript" type="text/javascript">
//生成目录索引列表
function GenerateContentList()
{
    var jquery_h1_list = $('#cnblogs_post_body h1');
    if (jquery_h1_list.length == 0) { return; }
    if ($('#cnblogs_post_body').length == 0) { return; }

    var content = '<a name="_labelTop"></a>';
    content    += '<div id="navCategory">';
    content    += '<p style="font-size:18px"><b>阅读目录(Content)</b></p>';
    // 一级目录 start
    content += '<ul class="first_class_ul">';

    for (var i = 0; i < jquery_h1_list.length; i++)
    {
        var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部(go to top)</a><a name="_label' + i + '"></a></div>';
        $(jquery_h1_list[i]).before(go_to_top);

        // 一级目录的一条
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>';

        var nextH1Index = i + 1;
        if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; }
        var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2");
        // 二级目录 start
        if (jquery_h2_list.length > 0)
        {
            //li_content +='<ul style="list-style-type:none; text-align: left; margin:2px 2px;">';
            li_content += '<ul class="second_class_ul">';
        }
        for (var j = 0; j < jquery_h2_list.length; j++)
        {
            var go_to_top2 = '<div style="text-align: right"><a name="_lab2_'+ i + '_' + j + '"></a></div>';
            $(jquery_h2_list[j]).before(go_to_top2);
            // 二级目录的一条
            li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>';

            var nextH2Index = j + 1;
            var next;
            if (nextH2Index == jquery_h2_list.length) 
            {
                if (i + 1 == jquery_h1_list.length)
                {
                    next = jquery_h1_list[0];
                }
                else
                {
                    next = jquery_h1_list[i + 1];
                }
            }
            else
            {
                next = jquery_h2_list[nextH2Index];
            }
            var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3");
            // 三级目录 start
            if (jquery_h3_list.length > 0)
            {
                li_content += '<ul class="third_class_ul">';
            }
            
            for (var k = 0; k < jquery_h3_list.length; k++)
            {
                var go_to_third_Content = '<div style="text-align: right"><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>';
                $(jquery_h3_list[k]).before(go_to_third_Content);
                // 三级目录的一条
                li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>';
            }
            
            if (jquery_h3_list.length > 0)
            {
                li_content += '</ul>';
            }
            li_content += '</li>';
            // 三级目录 end
        }
        if (jquery_h2_list.length > 0)
        {
            li_content +='</ul>';
        }
        li_content +='</li>';
        // 二级目录 end

        content += li_content;
    }
    // 一级目录 end
    content += '</ul>';
    content += '</div>';

    $($('#cnblogs_post_body')[0]).prepend(content);
}

GenerateContentList();
</script>
<!--Layer-->
<script src="//cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<link href="//cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<!--my -->
<script src="//files.cnblogs.com/files/yueshutong/yst.js"></script>
<!-- bootstrap -->
<script src="//files.cnblogs.com/files/yueshutong/bootstrap.min.js"></script>