博客园自定义皮肤扁平化设计

本文主要是介绍博客园自定义皮肤扁平化设计，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果抢先看

眼见为实！！！戳戳戳》》》marsggbo的博客园

1. 博客皮肤

首先将博客皮肤选为BlackLowKey

2. 代码设置

1) 页面定制CSS代码

body{
    background: url(http://dik.img.lgdsy.com/pic/38/26542/7d7f902577c15f1e_1440x900.jpg) fixed center center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#navList a:link, #navList a:visited, #navList a:active{
	text-shadow: none;
}
#navList a{
	text-shadow: none;
}
#navList a:hover{
	font-weight: bold;
	color:rgb(10,186,157);
	text-shadow: none;
	text-decoration: none;

}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: rgb(7,113,126);
}
.postTitle {
    border-left: 5px solid rgb(10,186,157);
}
#Header1_HeaderTitle{
	font-size: 350%;
}

#Header1_HeaderTitle:hover{
	text-decoration: none;
	color:rgb(10,186,157);
}
#blogTitle h2{
	margin-left: 2em;
	font-size: 1.5em;
    padding-bottom: 20px
}
#back-to-top {
    background-color: rgb(10,186,157);
    bottom: 0;
    box-shadow: 0 0 6px rgb(10,186,157);
    color:white;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
	width:20px;
	height:20px;
	border-radius:20px;
	text-align:center;
}
#back-to-top a{
	width:16px;
	height: 16px;
	text-decoration: none;
	font-weight:bold;
	color:white;
	font-size:18px;
}
#back-to-top a:hover{
	color:rgb(255,202,189);
}

#sidebar_shortcut{
display:none;
}

#div_digg{
  position:fixed;
  bottom:5px;
  width:120px;
  left:0px;
  padding:5px;
  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);
}

2)博客侧边栏公告

<div id="myTime">
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="80" id="honehoneclock" align="middle">
 <param name="allowScriptAccess" value="always">
 <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#ffffff">
 <param name="wmode" value="transparent">
 <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="180" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
 </object>
 </div>

<div align="left">
<b>您是第</b>
<a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3216805&c=9650728" alt="AmazingCounters.com"></a>
<b>位访客</b>
</div>

<div id="sidebar_friendLinks" class="sidebar-block">
<div class="friendLinks">
    <hr><br>
<b class="friendLinksTitle">友情链接</b>
<ul>
<li><a href="http://blog.csdn.net/marsggbo" title="CSDN博客">marsggbo的CSDN博客</a></li>
<li><a href="http://blog.163.com/hexin_mars_blog/" title="网易博客">火星教</a></li>
<li><a href="http://marsggbo.github.io/blog/" title="github博客">github博客</a></li>
<li><a href="http://www.cnblogs.com/marsggbo/p/" title="我的博客的评论列表">我的随笔</a></li>
</ul>
<div id="itemListLin_con" style="display:none;">
<ul>

</ul>
</div>
</div>
<hr><br>

3)页首Html代码

github地址

<a href="https://github.com/marsggbo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

4）页脚Html代码

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1263920205'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1263920205%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/marsggbo/category.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/marsggbo/category.js"></script>

<span id="back-to-top"><a href="#top">↑</a></span>
<br><br><hr>
<footer style="color: white; background-color: rgb(24,24,24); padding: 10px">
<h3 style="text-align: center; color: tomato; font-size: 16px">
<b>MARSGGBO</b><b style="color: white"><span style="font-size: 25px">♥</span>原创</b>
<br>
<br>
<b style="color: white">

</b>
</h3>
</footer>

页脚引入的文件链接： 博客园自定义设计

这篇关于博客园自定义皮肤扁平化设计的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！