博客美化完整代码

时至今日，我的博客主题已趋于完美，在我的审美角度来看已然合格，特决定放出源码，该代码前后大约半年的时间都在不断的完善，约有三分之一内容来自网络上的各大神犇的博客，另外三分之二则是我自己断断续续写成的，将删减后，去除大量无太大意义的代码模块，目前这个版本删减了约400行代码，只剩1200行代码。
注：我选用的模板是elf，推荐选用相同的模板，否则可能会有显示bug，以及不能原样照搬我的代码，否则连您的博客标题都和我的一样QAQ，请自行更改相关文字，如有不懂可以在评论区问我。

CSS

注：第二行需要替换成自己的博客的sidebar_links值，否则可能会有一点小小的bug，但基本不影响美观

/*侧边栏链接样式*/#sidebar_links1543072{    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    background: #fafcfd;    margin: 20px 5px;}.catList ul li{    border-bottom: 1px solid #dadfe1;    border-top: 1px solid #fff;    overflow: hidden;    padding: 5px;}   /*代码样式*/.postBody li, .postCon li{    margin-bottom:0em !important;} pre {position: relative;margin-bottom: 24px;border-radius: 3px;border: 1px solid #C3CCD0;background: #FFF;overflow: hidden;}code {display: block;padding: 12px 24px;overflow-y: auto;font-weight: 300;font-family: Menlo, monospace;font-size: 0.8em;}code.has-numbering {margin-left: 21px;}.pre-numbering {position: absolute;top: 0;left: 0;width: 20px;padding: 12px 2px 12px 0;border-right: 1px solid #C3CCD0;border-radius: 3px 0 0 3px;background-color: #EEE;text-align: right;font-family: Menlo, monospace;font-size: 0.8em;color: #AAA;}.cnblogs-markdown .hljs {   border: none !important;}#cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td {   border: none !important;   padding: 0;}.postCon {   font-size: 15px;}.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {   font-family: "Consolas",sans-serif !important;   font-size: 15px! important;}.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {   font-family: "Courier New",sans-serif!important;   font-size: 15px!important;   line-height: 1.5!important;   padding: 5px!important;}#cnblogs_post_body table, .cnblogs-post-body table {   border: none !important;   border-collapse: collapse;   word-break: break-word;}   /*侧边栏链接样式*/#sidebar_links1543073{    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    background: #fafcfd;    margin: 20px 5px;}.catList ul li{    border-bottom: 1px solid #dadfe1;    border-top: 1px solid #fff;    overflow: hidden;    padding: 5px;}   /*文章链接样式*/.postBody a {    text-decoration: none !important; }.postBody a {    color:#158fc2}.postBody a:hover {    color:#fa7e43}   /*文章链接间隔*/.postSeparator {    clear: both;    height: 1px;    border-top: 1px dotted #666;    width: 100%;    clear: both;    float: right;    margin: 0 auto 0px auto;}   .commentform {    background: #fff;    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    margin: 20px 5px 10px 0;    padding: 5px;}   #under_post_news {    display: none;}   /*字体与图片的大小*/#cnblogs_post_body img {    /*width:600px;*/    max-width: 100%;}#cnblogs_post_body ul {    font-size: 14px;}#cnblogs_post_body p, #cnblogs_post_body div {    font-size: 14px;}#cnblogs_post_body h1 {    font-size: 25px;}#cnblogs_post_body h2 {    font-size: 22px;}#cnblogs_post_body h3 {    font-size: 18px;}.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {    font-size: 14px !important;}.postTitle a:link, .postTitle a:visited, .postTitle a:active {    font-size: 1.2em;    font-weight: bold;    text-shadow: 0 0 1px #b3b4ba;    line-height: 1.5em;}.catListTitle {    font-size: 1.5em;}#blog-news {    font-size: 14px;}.sidebar-block ul li {    font-size: 14px;}.c_b_p_desc {    font-size: 14px;}.postDesc {    font-size: 14px;}.blog_comment_body {    font-size: 14px;}  /*评论样式*/.feedbackListSubtitle {    color: #726b6b !important;    border-top: 1px dashed #589cb2 !important;    padding-top: 5px !important;}#blog-comments-placeholder {    background: #fff;    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    margin: 0 5px 40px 0;    padding: 0 4px 0px 4px;}.commentform {    background: #fff;    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    margin: 20px 5px 10px 0;    padding: 5px;}.feedbackItem {    margin: -18px 0px;}.feedbackListSubtitle a:link{    color: #666;    font-weight: normal;    margin: 5px;}.feedbackCon {    margin: 30px;    margin-top: 5px;    position: relative;}.feedbackManage {    width: 200px;    text-align: end;    float: right;    margin: 0px 30px;}.feedbackListSubtitle {    color: #666;    border-top: 1px dashed #3061a9;    padding-top: 5px;}.feedbackCon::after {    display:none !important;}.feedbackCon::before {    display:none !important;}.comment_vote {    text-align: right;    margin: 5px 0px;}   /*积分与排名样式*/#sideBar {    color: #567286 !important;}#sidebar_scorerank{    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    background: #fafcfd;    margin: 20px 5px;}.sidebar-block ul li{    border-bottom: 1px solid #dadfe1;    border-top: 1px solid #fff;    overflow: hidden;    padding: 5px;}   /*小火箭*/#back-top {     position: fixed;     bottom: 100px;     right: 10px;     z-index: 99;    opacity: 0.5;}#back-top:hover{    opacity: 1.0;}#back-top span {     width: 50px;     height: 64px;     display: block;     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;}#back-top a{outline:none}   /*隐藏博客页尾的版权声明*/#footer{    display:none !important;}   /*自定义版权声明*/#gkfooter {    text-align: center;    min-height: 15px;    _height: 15px;    margin-top: 10px;    padding-top: 10px;    margin-bottom: 10px;    text-shadow: 1px 1px 0 #fff;}  /*手机定制主题*/@media (max-width: 767px) {#navigator {    width: auto !important;    font-size: 20px;    height: 90px !important;    background: #fff;    text-align: center;    margin-top: 20px !important;    border-radius: 8px;    box-shadow: 0px 0px 10px #1f7b9b;    border: 1px solid #1f7b9b;}#sideBar{    display:none !important;}.postTitle{    font-size: 1.8em !important;    font-weight: bold !important;    line-height: 1.5em !important;    width: 100% !important;    clear: both !important;}.day{    color: #666;    border-radius: 7px 7px 7px 7px;    box-shadow: 1px 1px 2px #a7a8ad;    background: #fff;    min-height: 10px;    _height: 10px;    margin: 0 10px 20px 13px !important;    padding: 5px 5px 5px 5px;    position: relative;    border-radius: 7px 7px 7px 7px;}#subtitle {     display: none !important;    float: right;    font-size: 22px;    color: #00CED1;    line-height: 18px;    margin: 20px 50px 0 0;} #sideBar, body > a,  .postDesc a{        display: none;}#main,#mainContent{        width: 100%;}.dayTitle {width: 0px;    display:none !important;}  #home {    padding-left: 0;    padding-right: 0;}#div_digg{    width: auto;    padding: 0;    right: -25px;    bottom: 3px;    box-shadow: none;}#div_digg .buryit {    display: none;}#mainContent .forFlow {    padding-right: 0;}#mainContent .post {    padding: 0 20px;} #sideBar,#blog-comments-placeholder {    padding: 0 15px;}}   /*电脑定制主题*/#main {    width: 90%;    margin: 20px auto 0;}#mainContent {    -o-text-overflow: ellipsis;    text-overflow: ellipsis;    overflow: hidden;    word-break: break-all;    float: left;    width: 75%;}#sideBar {    color: #a8b1ba;    width: 250px;    min-height: 200px;    float: right;    -o-text-overflow: ellipsis;    text-overflow: ellipsis;    overflow: hidden;    word-break: break-all;    width: 25%;}#navigator {    height: 30px;    clear: both;    width: 90%;    margin: 0 auto;}   /*导航栏字体颜色*/#navList a:link, #navList a:visited, #navList a:active {    color: 	#87CEEB;}   /*隐藏公告栏下方的个人介绍*/#profile_block {    margin-top: 5px;    line-height: 1.5;    text-align: left;    display: none;}   /*标题放大*/.postTitle, .entrylistPosttitle {    font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;    font-size: 1.8em;    padding: 5px 5px 5px 0px;    background: #fff;    border-radius: 10px 10px 0px 0px;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    transition: font-size 2.5s; /*这里改变的是字体的大小*/    -moz-transition: font-size 0.5s;    -webkit-transition: font-size 0.5s;    -o-transition: font-size 0.5s;}.postTitle:hover {    font-size: 2em; }   /*导航栏*/ #navigator {    font-size:20px;    height:45px;    background:#fff;    text-align:center;    margin-top:40px;    border-radius: 8px;    box-shadow: 0px 0px 10px #1f7b9b;    border: 1px solid #1f7b9b; }#navList a {    position: relative;    font-weight: bolder;    display: block;    height: 45px;    float: left;    text-align: center;    padding: .05em 1em;    font-size: 1.3em;}#navList li {    margin:0;    line-height:42px;    display:inline-block;    float:left;}#navList li:hover {    background:#1f7b9b;}#navList li a {    padding:0 25px;    text-decoration:none;    line-height:42px;    border:0;    color:#1f7b9b;    font-weight:bold;    display:-moz-inline-box;    display:inline-block;}#navList li a:hover {    padding:0 25px;    text-decoration:none;    line-height:42px;    border:0;    color:#fff;    font-weight:bold;    display:-moz-inline-box;    display:inline-block;}.blogStats {    height:22px;    color:#1f7b9b;    line-height:42px;}   /*隐藏原有导航栏*/#header{    display:none;}   /*博客标题*/.head{    height: 60px;    line-height:60px;    padding-left:5%;    box-shadow: 0 2px 2px rgba(0,0,0,0.2);    background: #87CEEB;}.head h1{    float:left;    width:200px;    height: 60px;    font-weight:bold;    font-size:26px;    background-color: #1f7b9b;    text-align: center;}.head h1:hover {    float:left;    width:200px;    height: 60px;    font-weight:bold;    font-size:26px;    background-color: #ff7227;    text-align: center;}.head h1 a {    color: #00FFFF;    outline: none;    -moz-outline: none;    text-decoration: none;    font-size: 26px;}#blog{    font-weight:normal;    font-size:16px;    color: #00FFFF;}#subtitle{    display:block;    float:right;    font-size:22px;    color:#00CED1;    line-height:18px;    margin:20px 5% 0 0;}   /*博客背景图片*/body {      background-color: #efefef;    background-image:url(http://images.cnblogs.com/cnblogs_com/gongdakai/1525184/o_%E5%8D%9A%E5%AE%A2%E8%83%8C%E6%99%AF3.png);      background-repeat: no-repeat;      background-attachment: fixed;      background-position: center 0;      background-size: cover;     padding-top:0px;}   /* 定制公告栏时钟位置 */#clockdiv {    /* left, center, right */    text-align: center;}   /*屏蔽博客园文章下面的广告*/.c_ad_block {    display: none !important;}#ad_t2{   display: none !important;}   /*固定推荐，删除反对*/#div_digg {    position: fixed;    bottom: 90px;    height: 56px;    width: 45px;    right: 38px;    border: 1px solid #fefefe;    padding: 7px;    background-color: #fff;    border-radius: 5px 5px 5px 5px !important;    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);    opacity: 0.5;}.diggnum {    font-size: 16px;}.diggword {    display: none;}.buryit{display:none;}.diggit{margin-left:0px; }#div_digg:hover {    opacity: 1.0 !important;}

公告栏

注：按照您自己的喜好，最好适当更改。一定要记得改“Q我吧”模块中表示QQ账号src的参数，改成您自己的QQ。

<font color="black"><center><h1>公  告</h1></center></font> 蒟蒻一枚~~~<br><br>弱校挣扎的OIer...<br><br>我的QQ在这哦！2399531787~~~【加好友请注明姓名和来源哦，谢谢各位支持^_^】<br><br>希望大家多多支持，觉得文章好可以点个赞，动动你的鼠标加下关注哦~~~<br><br>热爱交友！orz...<br><br>非常乐意互换友链呐<br><br>~o( =∩ω∩= )~<br><br> 有事您Q我!!!(点击下方图片建立临时会话)<br><br> <center><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1820863411&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:2399531787:13" alt="有事您Q我" title="有事您Q我"></a></center><br> <!-- 添加公告栏时钟 --><div id="clockdiv">    <canvas id="dom" width="120" height="120">时钟canvas</canvas></div><script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>

页首HTML

注：把第二行的博客名称改为您自己的，第三行的个性签名也改成您自己的，还有导航栏的几个链接也别忘了改成您自己的，头像、音乐、鼠标特效、版权声明等也建议一一更改，如果不知道怎么改可以在评论区问我

<div class="head clearfix"><h1><a href="https://www.cnblogs.com/gongdakai/">拱垲’<span id="blog">blog</span></a></h1><span id="subtitle">主博客 | 双脚踏翻尘世浪， 一肩担尽古今愁。</span></div>   <!--博客导航栏 --><div id="gkheader">	<div id="navigator"><ul id="navList"><li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li><li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongkai/">首页</a></li><li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/gongdakai/">技术博客</a></li><li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li></ul>	</div></div>

页尾HTML

<!--代码--><script>$(function () {    if ($(".cnblogs-post-body pre > code").length > 0) setCodeRowWithLang($(".cnblogs-post-body pre"));    else setCodeRowWithLang($(".cnblogs-markdown pre"));    /* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */    hljs.initHighlightingOnLoad();    hljs.initLineNumbersOnLoad();});function setCodeRowWithLang(pre) {    if (pre && pre.length) {        pre.each(function () {            var item = $(this);            var lang = item[0].className;              var langMap = {                "html": "HTML",                "css": "CSS",                "js": "JavaScript",                "cpp": "C++",               "cpp prettyprint":"C++",                "vim": "vim",            };            var displayLangText = "";            if (lang in langMap) displayLangText = langMap[lang];            else displayLangText = lang;            item.find('.hljs')        });    };}</script><script src="https://files.cnblogs.com/files/flipped/prettify.js"></script><script type="text/javascript">(function() {     $("pre").addClass("prettyprint");     prettyPrint();})();</script>   <!--头像--><script type="text/javascript" language="javascript">　　//Setting ico for cnblogs　　var linkObject = document.createElement('link');　　linkObject.rel = "shortcut icon";　　linkObject.href = "https://files-cdn.cnblogs.com/files/gongkai/favicon.ico";　　document.getElementsByTagName("head")[0].appendChild(linkObject);</script> <!--网易云音乐 --><script type="text/javascript">var s = unescape("\u0069\u0066\u0072\u0061\u006d\u0065");var f = '<'+s+' frameborder="no" border="0" marginwidth="0" marginheight="0" width=260 height=86 src="//music.163.com/outchain/player?type=2&id=550456837&auto=0&height=66" class="music" style="z-index: 999;right: 5PX;display: block;bottom: 10px;position: fixed;"></'+s+'>';$("body").append(f);</script></script>   <script>function addEvent(target,type,handler){    if(target.addEventListener){        target.addEventListener(type,handler,false);    }else{        target.attachEvent('on'+type,function(event){            return handler.call(target,event);        });    }}var progress = document.createElement('progress');progress.id = 'progress';progress.style.cssText = 'position:fixed;left:0;right:0;bottom:0;width:100%;height:9px;text-align:center;font:12px/12px "瀹嬩綋";';document.body.appendChild(progress);var H;addEvent(window,'load',function(){	progress.max = H = cnblogs_post_body.scrollHeight;});addEvent(window,'scroll',function(){	var h = document.documentElement.scrollTop || document.body.scrollTop;	progress.value =  h;	var radio = (h/H >= 1) ? 1 : h/H;	progress.innerHTML = progress.title =  Math.floor(100*radio) + '%';	});</script>   <div id="gkfooter"><div id="poweredby">Copyright © 2018 拱垲. All rights reserved.</div></div>   <script>  // 浏览器标题切换  var OriginTitile = document.title;    // 保存之前页面标题  var titleTime;  document.addEventListener('visibilitychange', function(){      if (document.hidden){          document.title = '喔唷 ￣ω￣ 不小心崩溃辣';          clearTimeout(titleTime);      }else{          document.title = '呀! (o°ω°o)又好啦~ ';          titleTime = setTimeout(function() {              document.title = OriginTitile;          }, 2000); // 2秒后恢复原标题      }  });  </script>   <!--返回顶部小火箭--><script type="text/javascript">$(function() {	// hide #back-top first	$("#back-top").hide();	// fade in #back-top	$(window).scroll(function() {		if ($(this).scrollTop() > 500) {			$('#back-top').fadeIn();		} else {			$('#back-top').fadeOut();		}	});	// scroll body to 0px on click	$('#back-top a').click(function() {		$('body,html').animate({			scrollTop: 0		}, 800);		return false;	});});</script><p id="back-top" style="display:none"><a href="#top"><span></span></a></p>   <!--代码放置于</body>上方--> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,255,255"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script>   <script type="text/javascript">/* 鼠标特效 */var a_idx = 0;jQuery(document).ready(function($) {    $("body").click(function(e) {        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤","拱大垲棒棒哒","GK最帅","好表脸的说","哼唧","咋地吧","我的bolg我做主","我的代码我做主","OhYeser","开森~皮一下");        var $i = $("<span></span>").text(a[a_idx]);        a_idx = (a_idx + 1) % a.length;        var x = e.pageX,        y = e.pageY;        $i.css({            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,            "top": y - 20,            "left": x,            "position": "absolute",            "font-weight": "bold",            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"        });        $("body").append($i);        $i.animate({            "top": y - 180,            "opacity": 0        },        1500,        function() {            $i.remove();        });    });});</script>