我的博客美化方案(含代码高亮)

依托模板：CodingLife

侧边栏公告：可放头像

原本放在侧边栏公告哪里的话，会在公告下显示一个头像，为了简约和出其不意的可爱用心，这里我把头像放到了页脚html代码里面，作用是在下方显示一个头像，有点可爱吧！！！

<div id="newsSideBar">
    <div class="headImage">
        <img src="https://www.cnblogs.com/images/cnblogs_com/runtu/1437585/o_dasd.jpg" alt="头像">
        <br>
    </div>
</div>

页首HTML页面代码

样式如图

<div id="pageBeginBar">
    <div id="pageBeginTitle">
    <a href="https://www.cnblogs.com/runtu/" >猫与向日葵</a>
        <span>LIFE IS FANTASTIC</span>
        <div class="clear"></div>
    </div>
</div>

 

页脚HTML页面定制代码

 

<div id="newsSideBar">
    <div class="headImage">
        <img src="https://www.cnblogs.com/images/cnblogs_com/runtu/1437585/o_dasd.jpg" alt="头像">
        <br>
    </div>
</div>

　　

页面定制css代码

/*网格纸背景*/
div.blogpost-body {
    background-color: #FFFFFF;
    background-repeat: repeat;
    background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); 
    background-size: 20px 20px; 
    background-position: center center;
}
body {
    background-image: url(//images.cnblogs.com/cnblogs_com/runtu/1645306/o_200211073214pg1.jpg);
    background-repeat: repeat;
}

/*粉色导航栏*/
div#navigator {
    background-color:#ff8688;
}

/*三级标题*/
h3 {
color: inherit; line-height: inherit; padding: 0px; margin: 1.6em 0px; font-weight: bold; border-bottom: 2px solid #ef7060; font-size: 1.3em;
}
h3 span {
font-size: inherit; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: #ef7060; color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;
}


/*页脚那一条黄线*/
#footer {
    text-align: center;
    min-height: 25px;
    height: 25px;
    border-top: 1px solid #ff8688;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom:35px;
}

/*不显示模版里的大黑板*/
#blogTitle {
    display: none;
}
/*头像和 猫和向日葵效果*/
#newsSideBar .headImage {
    padding: auto;
}
#newsSideBar .headImage img {
    border: 3px solid #2586d7;
    border-radius: 50%;
    width: 150px;
    margin: auto;
    display: block;
}


#pageBeginBar{
    background-color: rgb(255,255,255,0.1);
    height: 90px;
}
#pageBeginTitle {
    background-color: rgb(255,255,255,0.1);
    padding: 18px 20px 18px 70px;
    text-align: left;
    float: left
}
#pageBeginTitle a, #pageBeginTitle a:hover {
    color: #ff8688;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    padding: 10px 15px 8px 15px;
    display: block;
    float: left;
    outline: none
}
#pageBeginTitle span {
    font-size: 16px;
    font-weight: bold;
    display: block;
    float: left;
    padding: 22px 20px 13px 10px;
}

/*----------------上面不要删除----------------------*/




.postTitle, .entrylistPosttitle {
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #008080;
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
    color: #ff8688;
    margin: 0px 0px;
}

/*
自用markdown代码高亮解决方案
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:white;
  font-size:16px !important;
}

.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-keyword,.hljs-built_in{
  color:#66d9ef;
}

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

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

.hljs-string,
.hljs-type,
.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{
  color: #75715e;
}

.hljs-meta{
  color: #f92672;
}


/*
自用tinymec编辑器代码高亮解决方案-两种代码高亮方式
*/

/*代码高亮1-带复制按钮*/ 
.syntaxhighlighter .bold {
    font-weight:unset !important;
}
.syntaxhighlighter .line {
    background-color: rgb(40, 43, 46)!important;
}
.syntaxhighlighter .line.alt2 {
    background-color: rgb(40, 43, 46)!important;
}
.syntaxhighlighter .line.alt1 {
    background-color: rgb(40, 43, 46)!important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
    color: rgb(129, 142, 150)!important;
}
.syntaxhighlighter .keyword {
    color: rgb(147, 199, 99)!important;
    font-weight: unset !important;
}
.syntaxhighlighter .preprocessor {
    color: rgb(85, 113, 130) !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
    color: rgb(224, 226, 228)!important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
    color: rgb(147, 199, 99)!important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
    color: rgb(236, 118, 0)!important;
}
.syntaxhighlighter .functions {
    color: rgb(140, 187, 173)!important;
}
.syntaxhighlighter .gutter .line {
    border-right: 2px solid rgb(147, 199, 99)!important;
}
.syntaxhighlighter.collapsed .toolbar {
    background: rgb(40, 43, 46)!important;
    border: none !important;
    border-radius: 5px !important;
}
.syntaxhighlighter.collapsed .toolbar a {
    color: rgb(147, 199, 99)!important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
    color: rgb(78, 109, 48)!important;
}
.syntaxhighlighter {
    border-radius: 5px;
}
/*第二种高亮-不带复制按钮*/
.cnblogs_code div {
    background: #282b2e;
}
.cnblogs_code {
    background: #282b2e;
    border-radius: 5px;
    border: none;
    font-family: consolas !important;
    color: #fff;
}
.cnblogs_code_toolbar {
    background: #282b2e !important;
}
.cnblogs_code_toolbar a:hover, .cnblogs_code_toolbar a:link, .cnblogs_code_toolbar a:visited, .cnblogs_code_toolbar a:active, .cnblogs_code_toolbar a:link img, .cnblogs_code_toolbar a:visited img {
    background-color: #282b2e !important;
    border: none!important;
}
.cnblogs_code pre {
    font-family: consolas !important;
    padding-left: 3px;
    color: rgb(224, 226, 228);
}
.cnblogs_code span[style="color: #000000;"] , .cnblogs_code span[style="color: #ff0000;"]{
    color: rgb(224, 226, 228) !important;
}
.cnblogs_code span[style="color: #0000ff;"]{
    color: rgb(147, 199, 99)!important;
}
.cnblogs_code span[style="color: #800080;"]{
    color: #ffd740 !important;
}
.cnblogs_code span[style="color: #800000;"]{
    color: rgb(236, 118, 0)!important;
}
.cnblogs_code span[style="color: #008000;"]{
    color: rgb(129, 142, 150)!important;
}
.cnblogs_code span[style="color: #008080;"]{
    color: #afafaf!important;
    margin-right: 5px;
}
.cnblogs_code_collapse {
    border: none;
    background: #282b2e;
    color: rgb(147, 199, 99);
}
.cnblogs_code > pre {
    border: none !important;
}
.cnblogs_code > textarea {
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
}
/*代码高亮结束*/