博客园,CnBlogs,自定义,博客样式弄了半个晚上的时间，总算马马虎虎搞好了博客的样式。
整个博客是蓝色的基调，比较激情，我喜欢。
比较郁闷的是，rightmenu 和 main都是position:absolute 布局的。要添加一个footer，还真是被恶心到不行，现在虽然做成了position:fixed的，但标签和随笔增多的时候，肯定会覆盖一部分内容。没有js权限， 暂时先放着吧。
1. footer的代码：MyFooter部分直接插入了内联的Css样式，懒得修改了，过段时间肯定要把footer去掉。
<div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);"> <p id="myFootText">知识改变命运，码农拯救人生</p> <p id="myFootCopy">ohmygirl@2014</p> </div> 2. 同时去掉了文章底部烦人的推广链接和广告banner。看着清净了不少，CSS代码为：
/* advertise */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
width:0;
height:0;
display:none;
overflow:hidden;
}
3.文章底部的评论按钮的位置和大小都比较尴尬，位置太靠左，且可点击范围太小。这里一并贴出来：
#RecentCommentsBlock li { margin: 0; width: 275px; } #RecentCommentsBlock li.recent_comment_body { border-radius: 0; margin: 0; } #RecentCommentsBlock li.recent_comment_title { border-radius: 5px 5px 0 0; margin: 3px 0 0; } #RecentCommentsBlock li.recent_comment_author { border-radius: 0 0 5px 5px; margin: 0; } .desc_img{ width:75px; max-width:75px; } #blog-calendar{ background:white; } /* comment */ div.commentform{ margin-bottom:100px; } #commentform_title { background: url("<a href="http://static.cnblogs.com/images/icon_addcomment.gif">http://static.cnblogs.com/images/icon_addcomment.gif</a>") no-repeat scroll 0 2px; color: #0078d8; font-size:14px; } div.commentform p{ margin-bottom:10px; } .comment_btn { height: 35px; width: 90px; background: none repeat scroll 0 0 #0078d8; border: 0 none; border-radius: 5px; color: white; cursor:pointer; } .comment_btn:hover{ background:#317ef3; } #commentbox_opt,#commentbox_opt + p { text-align:center; } #tbCommentBody{ width:100%; resize:none; } #tbCommentAuthor,#tbCommentBody{ border:1px solid #0078d8; } #tbCommentBody:hover{ border:1px solid #fca021; } #comments > h3 { background: none repeat scroll 0 0 #0078d8; border-radius: 3px; color: white; padding: 8px; border:0 none; font-size:14px; } #comments{ font-size: 13px; } #comments h4{ margin-top:10px; } #comments h4 span { color: #6c6351; font-size: 12px; } .comment_actions { border-bottom: 1px dashed #0078d8; display: block; padding-bottom: 10px; } .blog_comment_body { color: #111; font-size: 13px; margin-bottom: 10px; margin-top: 10px; } #comment_nav { font-size: 14px; margin-top: 10px; text-align: right; } 最后，博客主题部分的css代码为：
/* header */
#header{
border:1px solid #044e97;
background:#0078d8 repeat;
box-shadow:0 0 5px;
}
h1{
background: none;
border-bottom:0 none;
}
#main{
margin-top:5px;
border-right:0 none;
min-height:1040px;
}
#Header1_HeaderTitle{
color:white;
font-weight:bold;
font-size:24px;
text-shadow:1px 5px 1px #000;
}
#Header1_HeaderTitle:hover{
color:#fca021;
}
#tagline{
color:white;
}
p.date{
background: none repeat scroll 0 0 #0078d8;
border-bottom: 1px solid #aaa;
border-radius: 5px;
color: white;
font-size: 14px;
font-weight: bold;
margin: 10px 10px 0 50px;
padding: 10px;
}
.postFoot, p.postFoot{
padding-bottom:2px;
border-bottom:1px solid #0078d8;
}
.postTitle{
padding:5px 0;
}
.postTitle a{
font-size:15px;
padding:2px 0;
}
.post h2{
border-bottom: 1px dashed #0078d8;
font-size: 1em;
margin-top: 10px;
padding: 0 0 10px;
}
.c_b_p_desc_readmore:hover{
color:#faa123;
}
#cb_post_title_url{
font-size:18px;
}
#MySignature{
border: 1px dashed #0078d8;
display: block;
padding: 5px;
}
#green_channel{
border: 1px dashed #0078d8;
}
/* right menu */
#rightmenu{
border:1px solid #0078d8;
background:#0078d8;
border-radius:10px;
}
#rightmenu ul{
background:white;
}
#rightmenu li{
background: none repeat scroll 0 0 #3385ff;
border: 1px solid #3385ff;
border-radius: 5px;
color: white;
margin: 10px;
padding: 5px;
width: 150px;
}
#rightmenu li a{
color:white;
padding-left:10px;
}
#rightmenu li:hover{
background:#317ef3;
}
#rightmenu h3{
color:white;
padding:2px 0 5px 10px;
font-size:18px;
border:0 none;
}
#blog-calendar{
background:white;
}
div.commentform{
margin-bottom:100px;
}
/* advertise */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
width:0;
height:0;
display:none;
overflow:hidden;
}
/* calendar */
.Cal{
border:0 none;
width:100%;
height:200px;
font-size:14px;
}
.CalTitle{
font-size:15px;
}
.CalTodayDay{
background:#0078d8;
}
.CalTodayDay a u{
color:#fc6700;
text-decoration:none;
}
博客园,CnBlogs,自定义,博客样式
|
