原本放在侧边栏公告哪里的话,会在公告下显示一个头像,为了简约和出其不意的可爱用心,这里我把头像放到了页脚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>
样式如图

<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>
<div id="newsSideBar">
<div class="headImage">
<img src="https://www.cnblogs.com/images/cnblogs_com/runtu/1437585/o_dasd.jpg" alt="头像">
<br>
</div>
</div>
/*网格纸背景*/
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;
}
/*代码高亮结束*/
原文:https://www.cnblogs.com/runtu/p/12295785.html