博客园自定义——关于自己博客样式的自定义

声明 

 博客样式仅供参考，如需帮助请与我联系。

全局样式

 首先选用的是博客园自带的皮肤样式 bulesky，

 选项为

 然后将样式自定义 如字体颜色大小，页面定位等等。

 如下是页面样式CSS：

#ad_t2,#under_post_news,#under_post_kb,#HistoryToday,#ad_c1,#ad_c2{
display: none;
}

#header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2; 
}
#main {
margin-top: 40px;
}
body {
font-size: 15px;
font-family:"微软雅黑";
}
#cnblogs_post_body h2 {
background: none repeat scroll 0% 0% rgb(216, 216, 216);
border-radius: 6px 6px 6px 6px;
color: rgb(102, 102, 102);
font-family:"Comic Sans MS","微软雅黑";
font-size: 17px;
margin: 15px 0px !important;
padding: 5px 0px 5px 20px;
}
.post {
background-color: #ffffff;
}
#cnblogs_post_body p>img {
-webkit-box-shadow: 0 0 20px 5px #dadada;
-moz-box-shadow: 0 0 20px 5px #dadada;
box-shadow: 0 0 20px 5px #dadada;
margin: 20px;
}
#tbCommentBody {
width: 95%;
height: 100px;
}
h4{
background-color: #f1f1f3;
margin: 0 -32px;
padding: 0 32px;
color: red;
}
#navigator, #blogTitle, #main, #footer {
width: 1200px;
}
#mainContent {
width: 965px;
}
#cnblogs_post_body img {
max-width: 850px;
}
.forFlow img {
max-width: 80%;
}
.postBody blockquote, .postCon blockquote {
border-left-style: inset;
border-left-width: 4px;
border-left-color: #16a89d;
background: #f1f1f3;
margin-top: 20px;
}
#page_begin_html{
position: fixed;
z-index: 99999;
}
.motto{
margin-top: 20px;
margin-bottom: 20px;
color: #F77908;
font-size: 14px;
text-align: center;
}

侧公告栏

 添加了一张图片以及一句座右铭。

 图片添加方式为 上传一张照片到相册利用其地址进行添加。

<div><img src="http://images.cnblogs.com/cnblogs_com/lixu880/943505/o_icon.png" alt="logo" width="200px" height="200px"><div>

<p class="motto">热爱学习，天天向上。</p>

页首

 自定义一些导航。

<script>
//导航
$("#navList").append("<li><a class='menu' href='http://www.cnblogs.com/lixu880/p/6368627.html'>读书</a></li>");
$("#navList").append("<li><a class='menu' href='https://github.com/lixu.html'>Github</a></li>");
$("#navList").append("<li><a class='menu' href='http://www.cnblogs.com/lixu880/p/6368789.html'>关于我</a></li>");
</script>

页尾

添加一个返回顶部的超链接。

 

<a href="###" id="returnTop" style="bottom: 10px;position: fixed;right: 10px;font-size: 16px;">returnTop</a>
<script>
$(function(){
$('#returnTop').click(function () {
$('html,body').animate({ scrollTop: '0px' }, 800);
returnfalse;
});
});
</script>

最后

 希望大家打造出一个自己喜欢的具有个性的博客