我的博客美化方案(含代码高亮)
依托模板: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; } /*代码高亮结束*/
GitHub: https://github.com/Ymy214
博客园 : http://www.cnblogs.com/runtu/
CSDN : https://blog.csdn.net/isinple
联系 : QQ : 760963870 微信 : 17181577084
博客园 : http://www.cnblogs.com/runtu/
CSDN : https://blog.csdn.net/isinple
联系 : QQ : 760963870 微信 : 17181577084