博客园新主题
注册了一个博客园帐号。看到能够修改CSS就自己修改了一下
如大家所见，目前就是这样了，还在修改，
本文不定期更新
特点：
1，目前能够自适应电脑和手机屏幕（最小宽度320）；
2，菜单自动跟随；
3，侧边栏自动显示隐藏；
4，低版本IE上头部背景图片有些窄，本来想全部填充，结果用滤镜也不行，就先这么放着了，如果不喜欢可以把图片去掉；
5，页面未加载完毕时我加了一个遮罩层和一个gif的load图片，嫌麻烦的也可以去掉；
6，最近发现右侧过长时左侧侧边栏没有了很难看，打算有空修改一下。
主题使用方法如下：
1-使用皮肤BlackLowKey
2-禁用模版默认CSS
3-整体样式CSS如下
/*
* Globals
*/
body {
padding:0;
margin:0;
font-family: 微软雅黑,Georgia, "Times New Roman", Times, serif;
color: #555;
background-color:#F5F5F5;
width:100%;
outline: none;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
#header{
border-radius:3px;
padding:0px 0px 10px 0px;
width:100%;
min-width:320px;
margin:auto;
max-width:1200px;
}
#home{
padding:0;
margin:auto;
width:100%;
}
#main{
background-color:#F5F5F5;
border-radius:3px;
max-width:1200px;
padding:0px 0px 10px 0px;
width:100%;
min-width:320px;
margin:auto;
}
#mainContent{
border-radius:3px;
background-color:#ffffff;
box-shaodw:1px 1px 2px #dcdcdc;
float:right;
}
#sideBar{
border:1px solid #dcdcdc;
border:1px solid #dcdcdc\0;
padding:10px;
float:left;
width:220px;
min-width:220px;
border-radius:2px;
background-color:#ffffff;
border-top:3px solid #C71585;
}
#footer{
background-color:#333333;
border-radius:3px;
border:1px solid #fcfcfc;
padding:0px 0px 10px 0px;
width:100%;
max-width:1200px;
color:#fcfcfc;
margin:auto;
text-align:center;
min-width:320px;
font-family:Georgia;
font-size:14px;
}
#navigator{
font-family:微软雅黑;
color:#ffffff;
background-color:#C71585;
border-radius:2px;
box-shadow:1px 1px 2px #dcdcdc;
height:35px;
border:1px solid #dcdcdc;
border-radius:2px;
}
#navList{
height:25px;
display:block;
margin-top:5px;
border-radius:2px;
padding-bottom:0;
margin-bottom:0;
}
#navList > li{
float:left;
color:#ffffff;
margin-right:10px;
}
#navList > li > a{
color:#ffffff;
height:2em;
margin-top:-10px;
}
#navList > li > a:hover{
font-weight:bold\0;
text-shadow: 1px 1px 3px #ffffff;
}
.blogStats{
text-align:right;
padding-right:30px;
display:none;
margin-top:-25px;
}
#Header1_HeaderTitle{
color:#C71585;
text-shadow: 1px 1px 1px #f5f5f5;
font-size:18px;
text-decoration: none;
font-weight:bold;
background-image: -moz-linear-gradient(top, #fffffff 0%, #f9f9f9 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fffffff), color-stop(100%,#f9f9f9 ));
background-image: -webkit-linear-gradient(top, #fffffff 0%,#f9f9f9 100%);
background-image: -o-linear-gradient(top, #fffffff 0%,#f9f9f9 100%);
background-image: linear-gradient(top, #fffffff 0%,#f9f9f9 100%);
padding:0 3px 3px 3px;
}
a{
text-decoration: none;
}
li{
list-style:none;
}
#blog-calendar{
border:1px solid #f5f5f5;
border-radius:2px;
margin-bottom:10px;
}
#blogTitle{
background-color:#F5F5F5;
background:url(http://images.cnblogs.com/cnblogs_com/oospace/653418/o_default.png) left top no-repeat;
width:100%;
height:auto;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.cnblogs.com/cnblogs_com/oospace/653418/o_default.png)', sizingMethod='scale')\0;*/
overflow:hidden;
z-index:-1;
}
#blogTitle h2{
text-shadow: 1px 1px 1px #f8f8ff;
font-size:12px;
color:#C71585;
font-family:微软雅黑;
padding-right:10px;
height:25px;
}
input[type=button]{
height:34px;
background-color:#FFD700;
border:1px solid #dcdcdc;
outline:none;
padding:3px;
font-family:微软雅黑;
color:#ffffff;
cursor:pointer;
border-radius:2px;
}
input[type=button]:hover{
background-color:#8c8c8c;
}
#google_q,#q{
height:25px;
background-color:#fcfcfc;
border:1px solid #ececec;
outline:none;
padding:3px;
border-radius:2px;
}
#q{
width:140px;
}
#btnZzk{
width:60px;
border-radius:2px;
}
#widget_my_google{
display:none;
}
.catListTitle{
background-color:#f9f9f9;
padding:3px;
font-size:16px;
color:#333333;
font-weight:bold;
border-radius:2px;
}
a{
color:#5d7895;
}
a:hover{
color:#428bac;
}
.CalTitle{
color:#ffffff;
background-color:dodgerblue;
border-radius:2px;
border:1px solid #fcfcfc;
}
.CalNextPrev a{
color:#ffffff;
padding-left:5px;
padding-right:5px;
}
.CalNextPrev a:hover{
color:#5d7895;
background-color:#ffffff;
}
.CalDayHeader{
color:#5d7895;
}
.CalOtherMonthDay{
color:#dcdcdc;
}
.CalWeekendDay{
color:green;
}
.CalTodayDay{
background-color:dodgerblue;
border-radius:2px;
color:#ffffff;
cursor:default;
}
#blogCalendar > tbody > tr >td:hover{
background-color:deeppink;
border-radius:2px;
color:#ffffff;
cursor:default;
}
.postTitle{
background-color:#fcfcfc;
padding:3px;
border-radius:2px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
}
.dayTitle a{
float:right;
color:#428bac;
font-family:Georgia;
}
td > a{
color:red;
}
.postCon,.postDesc{
padding:0px 0px 5px 30px;
}
ul{
padding-left:10px;
}
.day{
margin-bottom:5px;
padding:10px;
border:1px solid #dcdcdc;
border-top:3px solid deeppink;
box-shadow:1px 1px 3px #dcdcdc;
background-color:#ffffff;
}
.day:hover{
/*filter:alpha(opacity=100);*/ /*IE滤镜，透明度50%*/
/*-moz-opacity:1;*/ /*Firefox私有，透明度50%*/
/*opacity:1;*//*其他，透明度50%*/
box-shadow:none;
}
.c_b_p_desc_readmore{
display:none;
}
#cb_post_title_url{
font-size:20px;
font-weight:bold;
}
.post{
padding:10px;
border:1px solid #f5f5f5;
}
#MySignature,.postDesc{
color:#428bac;
font-size:14px;
}
#div_digg{
float:left;
}
#tbCommentAuthor{
border:none;
background-color:#ffffff;
}
.tbCommentBody{
width:100%;
height:60px;
}
.feedbackItem{
padding:3px;
border:1px solid #f5f5f5;
}
.feedbackItem{
margin-bottom:10px;
border-radius:2px;
}
#green_channel{
border:none;
}
.comment_date{
float:right;
font-family: Georgia;
color:#428bac;
}
.layer{
display:none;
}
.louzhu{
color:#5d7895;
}
.feedbackManage{
float:right;
}
.blog_comment_body{
color:#8c8c8c;
}
#lnkBlogLogo{
display:none;
}
.post{
border-top:3px solid #428bac;
}
.postTitle{
height:30px;
}
.cover{
position: fixed;
z-index: 99999999;
width: 100%;
height: 100%;
left: 0;
top: 0;
min-width: 700px;
min-height: 740px;
opacity: 0.5;
filter: alpha(opacity = 50);
background-color: #ffffff;
text-align:center;
}
.load{
position:fixed;
margin:auto;
top:40%;
left:50%;
z-index:999999999;
width:40px;
height:40px;
margin-left:-20px;
}
4-页首Html代码
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div class="cover">
</div>
<img class="load" src="http://images.cnblogs.com/cnblogs_com/oospace/653418/o_load1.gif" />
5-页脚Html代码
<script>
function setWidth(){
var mainWidth=parseInt($("#main").css("width"));
var slideBarWidth=parseInt($("#sideBar").css("width"));
if(mainWidth<=800){
$("#sideBar").hide();
$(".blogStats").hide();
$("#mainContent").css("width","100%");
$("#navigator").css("width",mainWidth);
}else{
$("#navigator").css("width",mainWidth);
$("#sideBar").show();
$(".blogStats").show();
$("#mainContent").css("width",mainWidth-slideBarWidth-30+"px");
}
}
$(function(){
setWidth();
})
window.onresize=setWidth;
$(function() {
//获取要定位元素距离浏览器顶部的距离
var navH = $("#navigator").offset().top;
//滚动条事件
$(window).scroll(function() {
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if (scroH >= navH) {
$("#navigator").attr("style","position:fixed;top:0px;z-index:99999;width:"+$("#main").css("width")+";height:35px;");
}else{
$("#navigator").attr("style","");
}
});
});
$(".day:odd").css("border-top","3px solid #C71585");
$(".day:even").css("border-top","3px solid dodgerblue");
window.onload=function(){
$(".cover").hide();
$(".load").hide();
}
</script>
