博客园皮肤美化

我的博客园皮肤代码存储笔记

以下是全站css代码:

#header{display:none;}
#main{margin-top:100px;}

/** 导航栏 */
    #mynavbar{
        width: 100%;
        height: 70px;
        min-width:550px;
        position: fixed;
        display: block;
        top: 0px;
        z-index: 100;
        background-color: white;
        transition:0.5s ease-in-out;
        box-shadow: 0 1px 5px rgba(0,0,0,.1);
    }
    #mynavbar_menu{
        display: inline-block;
        width: auto;
        position: relative;
        float: right;
        text-align: right;
        line-height: 68px;
    }
    #mynavbar_menu a{
        padding: 0 15px;
        font-size: 16px;
        outline: 0;
        color: #313131;
        text-decoration: none;
    }
    #mynavbar_menu a:hover{
        color: #eb5055 !important;
    }
#mynavbar span{
text-decoration: none;
}
#mynavbar span:hover{
color: #1494FB !important;
}




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: #0D47A1;
}
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;
    width: 70%;
    /*原始65*/
    /*页面顶部的宽度*/
    background-color: rgb(238, 238, 238);
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

#main {
    padding-top: 0px;
    min-width: 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;
    width: 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;
}

.blogStats {
    color: #616161;
}

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

#topics > div > h1 {
    width: 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;
    width: 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 {
    width: 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 {
    width: auto;
    height: auto;
    max-width: 100%;
}

/*---字体颜色----*/
/*引用*/
.postBody blockquote {
    color: unset;
    border-radius: 1px;
    font-size: 15px;
    background-color: #e8e8e8;
    border-width: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-width: 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-width: 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;
}

/*---代码块样式---*/
/*
 代码高亮开始，使用了一个叫Monokai Sublime的黑色主题皮肤，直接拿过来还不行，有一些样式冲突，还要自己稍微改一些地方
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代码不换行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
}

.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: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.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: #e6db74;
}

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

/*黑色主题皮肤结束*/

/*特别的代码块*/
code.hljs.delphi {
    white-space: pre;
    color: #fff;
    background-color: #000 !important;
}

code.hljs.haskell {
    white-space: pre;
    color: #fff;
    background-color: #000 !important;
}

/*解决代码块滑动*/
#cnblogs_post_body > pre {
    overflow-x: auto;
}

.hljs-comment,.hljs-quote,.hljs-variable {
    color: #03A9F4
}

.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag {
    color: #1ee61e
}

.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition {
    color: #cc1609;
}

.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta {
    color: #2b91af
}

.hljs-doctag {
    color: gray
}

.hljs-attr {
    color: #FFC107
}

.hljs-symbol,.hljs-bullet,.hljs-link {
    color: #00b0e8
}

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

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

/*好看的滚动条*/
::-webkit-scrollbar {
    width: 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 {
    width: 100% !important;
    display: none;
}

/*自定义按钮分享*/
#channel {
    padding: 10px 0;
    margin-bottom: 10px;
    margin-top: 10px;
    border: silver 0px dashed;
    font-size: 12px;
    width: 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 {
    width: fit-content;
    margin: 0 auto;
    background-color: #F44336;
}

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

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

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

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

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

.btnd {
    background-color: #2196F3;
    margin-right: 8px;
    width: 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 {
    width: 24px;
}

/*作者栏*/
#author_profile {
    float: left;
    width: 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;
}

/*提交评论*/
.comment_btn {
    border-width: 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-width: 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;
    width: 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;
  color:#888;
}
.feedbackListSubtitle a {
  color:#888;
}
.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-width: 3px;
  border-color: #171515;
  border-bottom-color:  #000;
  border-width: 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;
    width: 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 {
    width: 130px;
    display: none;
    position: absolute;
    right: 150px;
    top: 6px;
}
.feedbackItem:hover .feedbackManage {
    display: block;
}

.feedbackItem a {
    color: #989898 !important;
    transition: all .2s;
}
.feedbackItem a:hover {
    color: #FF661C !important;
    text-decoration: underline;
}

.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;
    margin-top: -34px;
    display: none;
}
.feedbackItem:hover .comment_vote {
    display: block;
}
.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;
    max-width: 500px;
}

.blog_comment_body:before {
    content: '';
    display: block;
    position: absolute;
    left: -17px;
    top: 9px;
    width: 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;
    width: 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;
}
.feedbackItem .sendMsg2This {
    display: none;
}

.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;
    width: 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: 66px;
    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;
    width: 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-width: 0 1px;
    height: 353px;
    left: 5px;
    position: absolute;
    top: 0;
    width: 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;
    width: 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;
    width: 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;
    width: 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;
    width: 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;
    width: 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;
width: 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;
width: 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代码：

<!-- 自定义导航条 -->
<div id="mynavbar">
    <div style="position:relative;width:65pc;height:70px;margin:0 auto;">
        <a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/famine">
            <img style="width: auto;height: 22px;outline: 0;margin-top: 25px;" src="https://blog.liantao.me/assets/icons/favicon.png">
        </a>
        <span class="header-span" style="font-size:18px; height:18px;line-height:18px;padding-bottom:2px;">练涛</span>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/famine">首页</a>
            <a href="https://msg.cnblogs.com/send/famine">联系</a>
            <a href="https://github.com/famine-life">Github</a>
            <a href="https://blog.liantao.me/links.html">友情链接</a>
            <a href="https://www.cnblogs.com/">博客园</a>
            <a href="https://www.liantao.me">关于</a>
        </div>
    </div>
</div>

<script>
//通过滚动条控制导航条的展现隐藏
    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {
            if (t>120) {
                $("#mynavbar").css("margin-top","-70px");//顶部导航
                $("#post-bottom-bar").css("bottom","-3pc");//底部导航
            }
            if (t>300) {
                $("#right_meun").css("display","inline-block");//右侧导航
            }
        //上拉
        }else{
            //防止用a链接跳转也触发效果
            if (oldScrollNum-t<20) {
                $("#mynavbar").css("margin-top","0px");//顶部导航
                $("#post-bottom-bar").css("bottom","0");//底部导航
            }
            if (t<=300) {
                $("#right_meun").css("display","none");//右侧导航
            }
        }
        oldScrollNum = t;
    }

// 自定义底部文字
var footer = "Copyright ©2018 练涛 xanwidtf@foxmail.com";
// 自定义文章出处版权声明：只需要改动姓名
var signatrue = "练涛";
// 支付宝二维码地址
var zfb = "http://images.cnblogs.com/cnblogs_com/famine/1286916/o_alipay.jpg";
// 微信二维码地址
var wxm = "http://images.cnblogs.com/cnblogs_com/famine/1286916/o_wx.jpg";
//网站ICO图标
var ico = "https://files.cnblogs.com/files/famine/favicon.ico";
</script>

页脚html代码:

<!--Layer-->
<script src="http://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>

 

以下是弄好的首页，截图记录：

如图：