博客园自定义主题 皮肤

https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension

我是参考的这个博主，取舍一些，更改一下底色就完成了

博客侧边公告栏

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone"></a><a href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq" data-cmd="tqq"></a><a href="#" class="bds_renren" data-cmd="renren"></a><a href="#" class="bds_weixin" data-cmd="weixin"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

View Code

页首html代码

<!-- 背景动画 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>

<!-- 标签云相关库 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>


<style>* { margin: 0; padding: 0 }
body { color: #586F76; background: url("https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-684039.png") no-repeat center 0 #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif, "寰蒋闆呴粦"; font-size: 13px; line-height: 1.8 }
a { color: #399AB2; text-decoration: none }
a:hover { color: #FE4165 }
img { border: none }
li { list-style: none }
p { font-size: 14px }
blockquote { background-color: #AED7ED }
.cnblogs_code { background-color: #F6F8FA !important }
.cnblogs-markdown code { background-color: #F6F8FA !important }
#cnblogs_post_body table,.cnblogs-post-body table { border-collapse: collapse; width: 100%; margin-bottom: 4px; margin-top: 4px }
#cnblogs_post_body th,.cnblogs-post-body th { font-weight: 700; font-size: 16px }
#cnblogs_post_body tr:nth-child(2n),.cnblogs-post-body tr:nth-child(2n) { background-color: #F6F4F0 !important }
#home { margin: 0 auto; text-align: left; max-width: 1200px }
#blogTitle { padding: 16px; text-decoration: none }
.headermaintitle { font-size: 18px; color: #963432 }
#Header1_HeaderTitle { font-size: 24px; color: #DE6F64; font-family: "闅朵功", serif }
#blogTitle h2 { font-size: 18px; font-family: Brush Script MT, serif, "寰蒋闆呴粦" }
#navigator { background: #E8E8E8; height: 40px; line-height: 40px; color: #999; padding-left: 15px; padding-right: 5px; padding-top: 2px }
#navList { float: left }
#navList li { float: none; display: inline; margin-right: 20px; font-size: 16px; font-weight: 700 }
div#navCategory blockquote { padding: 20px; margin-bottom: 25px; background-color: #f5f5f5; border-left: 6px solid #B4B4B4; font-size: 16px; font-weight: 400; line-height: 30px }
.blogStats { float: right; color: #999; margin-right: 16px }
#mainContent { margin-left: auto; width: 78%; float: right }
.forFlow { margin: auto }
.day { border: 1px solid #CCC; margin: 20px 0 }
.dayTitle { display: none }
.postTitle { padding: 10px 0 10px 20px; border-bottom: 1px solid #CCC; font-size: 22px; font-weight: 700 }
.postCon { padding: 20px 20px 20px; border-bottom: 1px solid #CCC }
.postDesc { padding-right: 20px }
.entrylistItemPostDesc,.postDesc { color: #999; text-align: right; padding-top: 10px; padding-bottom: 10px }
#sideBar { width: 20%; float: left; border: none; overflow: hidden; padding: 5px }
#sideBarMain { margin-top: 20px }
#MyIng .ing_title,#sideBar h3 { margin: 10px 0 10px 0; font-size: 14px; text-align: left; padding-left: 10px }
h3.catListTitle { color: #FFF; background-color: #F1AAA6; text-indent: 2px }
#calendar { margin-top: 16px; text-align: center }
#footer { height: 60px; line-height: 60px; color: #586F76; text-align: center; padding: 10px 5px 0 15px }
.postBody { padding: 10px 20px 10px; border-bottom: 1px solid #D9DBE1; background-color: #FCFCFA }
.feedbackItem { padding: 8px; border-bottom: 1px dotted #CCC }
.post { padding-top: 1px; margin-top: 20px; border: 1px solid #D9DBE1 }
#cnblogs_post_body h1 h2 h3 h4 { margin: 1em 0 .5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; position: relative; line-height: 40px }
#cnblogs_post_body h1 { color: #399AB2; font-size: 22px; border-bottom: 2px solid rgba(53,86,129,.3) }
#cnblogs_post_body h2 { color: #60497C; font-size: 20px; border-bottom: 2px solid rgba(53,86,129,.3) }
#cnblogs_post_body h3 { font-size: 18px; color: #346093 }
#cnblogs_post_body h4 { font-size: 16px; color: #78943A }
#cnblogs_post_body #signature { margin-top: 20px; background-color: #AED7ED; padding: 10px 20px 10px 20px; font-size: 14px }
#div_digg { position: fixed; bottom: 10px; right: 15px; border: 2px solid #ECD7B1; padding: 10px; width: 140px; background-color: #FFF }
.feedbackCon { padding-top: 13px; padding-bottom: 10px; background: 0 0; margin-left: 1em; color: #666; line-height: 1.5 }
.feedbackItem { padding: 8px; border-bottom: 1px dotted #CCC }
.body_right img { width: 50px; height: 50px; margin-right: 20px; background-color: #F5F5F4 }
.feedbackManage { float: right }
.blog_comment_body { border: 1px none #888; padding: 10px; width: 75%; background: linear-gradient(#DBD9CC,#F2F0E4) }
.timeline-comment { position: relative; background-color: #FFF; border: 1px solid #D1D5DA }
.feedback_area_title { font-size: 18px; font-weight: 600; color: #DE6F64 }
div#EntryTag a { display: inline-block; padding: .3em .6em; margin: 0 .5em .5em 0; white-space: nowrap; background-color: #F1F8FF }
div#EntryTag a:hover { background-color: #FFEBCC }
div#BlogPostCategory a { display: inline-block; padding: .3em .6em; margin: 0 .5em .5em 0; white-space: nowrap; background-color: #F1F8FF }
div#BlogPostCategory a:hover { background-color: #FFEBCC }
.c_ad_block { display: none }
#ad_t2 { display: none }</style>

View Code

背景图片的更改有个页首代码有个Background url自己更改喜欢的