更新时间：2019-02-18

花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。原博主的连接：https://www.cnblogs.com/Penn000/p/6947472.html。

　　如果希望修改成类似我这样的话->首先博客皮肤选择darkgreentrip。

　　代码：

　　

#home {margin:0auto;width:80%;/*原始65*/min-width: 980px;/*页面顶部的宽度*/background-color: rgba(245, 245, 245, 0.7);padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {background: rgba(12, 100, 129, 1) url('https://www.cnblogs.com/images/cnblogs_com/Tangent-1231/1132814/o_timg.jpg') fixed no-repeat;   //修改背景图片background-position: 50% 5%; background-size: cover;
}
#blogTitle {height: 100px;/*高度*/clear: both;background-color: rgba(240,255,255,0.5);   //博客标题的背景
}
#blogTitle h1 {font-size: 36px;font-weight: bold;line-height: 1.8em;/*原始 1.6em*/margin-top: 10px;/*原始 15px*/color: #FF1493;
}
#blogTitle h2 {font-weight: normal;font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/line-height: 1.8;color: #FF1493;font-weight: bold;text-align: right;float: right;
}
#navigator{background-color:rgba(135,206,205, 0.5);          //标题栏下的颜色
}
#navList a:link, #navList a:visited, #navList a:active{color: #FFFFFF;font-size: 18px;font-weight: bold;
}
.blogStats{color: #eee;
}
.postTitle {border-left: 8px solid rgba(132,112,255, 0);margin-left: 10px;margin-bottom: 10px;font-size: 20px;float: right;width:100%;clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {color:     #FF6A6A;transition: all0.4s linear 0s;
}
.postTitle a:hover {margin-left: 30px;color: #EE6363;text-decoration: none;
}
.postCon {float: right;line-height: 1.5em;width:100%;clear: both;padding: 10px0;
}.day .postTitle a {padding-left: 10px;
}
.day {background: rgba(255, 255, 255, 0.5);
}/*文章附加信息*/.postDesc {   background: url(images/posted_time.png) no-repeat 01px;color: #757575;float: left;width:100%;clear: both;text-align: left;     font-family: "微软雅黑" , "宋体" , "黑体",Arial;font-size: 13px;padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/margin-top: 20px;line-height: 1.8;padding-bottom: 35px;
}.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{background: rgba(255, 255, 255, 0.5);margin-bottom: 35px;word-wrap: break-word;
}.CalTitle{background: rgba(255, 255, 255, 0);
}
.catListTitle{background-color: rgba(255,110,180,0.6);   //栏目的条纹颜色
}#topics{background: rgba(255, 255, 255, 0.5);
}.c_ad_block{display: none;
}#tbCommentBody{width:100%;height: 200px;background: rgba(255, 255, 255, 0.5);
}#q{background: rgba(255, 255, 255, 0);}.CalNextPrev{background: rgba(255, 255, 255, 0);}.cnblogs_code{background: rgba(255, 255, 255, 0);
}.cnblogs_code div{background: rgba(255, 255, 255, 0);
}.cnblogs_code_toolbar{background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{background: rgba(255, 255, 255, 0.5);
}

　　中间各个栏目的颜色和字体颜色可自由更换，自行调节。

　　rgba针对图片，前三个是颜色调节，最后一个数字是透明度调节。color主要针对字体。

　　最后的实现：

　　

　　后续可能会更新栏目插入，敬请期待。

　　2019-02-19更新

　　首先在设置里面申请博客侧边栏公告的JS代码使用权。需要一天左右的时间。

　　然后添加代码。

　　栏目的仓鼠和时钟参考代码来自：https://www.cnblogs.com/jingmoxukong/p/7826982.html

　　

1 <!-- 小老鼠游戏控件 -->
2 <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="230" height="160"><param name="movie"           value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>
3
4 <!-- 公告栏时钟控件 -->
5 <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

　　live2d看板娘参考了很多，最后终于调节好了。

　　https://www.cnblogs.com/kousak/p/9726514.html   参考和下载文件源，具体戳进去看。

　　文件下载地址

　　替换代码中的文件地址。除了最后一行，是菜单的地址。

　　

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Live2D</title><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Tangent-1231/waifu.css"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body><link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/Tangent-1231/waifu.css"><div class="waifu" id="waifu"><div class="waifu-tips" style="opacity: 1;"></div><canvas id="live2d" width="280" height="250" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span><span class="fui-chat"></span><span class="fui-eye"></span><span class="fui-user"></span><span class="fui-photo"></span><span class="fui-info-circle"></span><span class="fui-cross"></span></div></div><script src="https://blog-static.cnblogs.com/files/Tangent-1231/live2d.js"></script><script src="https://blog-static.cnblogs.com/files/Tangent-1231/waifu-tips.js"></script><script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

2019-07-08

如果觉得有用，就登录账户点一个推荐吧。谢谢