博客园CnBlogs自定义博客样式分享_心得技巧教程-查字典教程网
博客园CnBlogs自定义博客样式分享
博客园CnBlogs自定义博客样式分享
发布时间:2016-12-27 来源:查字典编辑
摘要:弄了半个晚上的时间,总算马马虎虎搞好了博客的样式。整个博客是蓝色的基调,比较激情,我喜欢。比较郁闷的是,rightmenu和main都是po...

弄了半个晚上的时间,总算马马虎虎搞好了博客的样式。

整个博客是蓝色的基调,比较激情,我喜欢。

比较郁闷的是,rightmenu 和 main都是position:absolute 布局的。要添加一个footer,还真是被恶心到不行,现在虽然做成了position:fixed的,但标签和随笔增多的时候,肯定会覆盖一部分内容。没有js权限, 暂时先放着吧。

1. footer的代码:MyFooter部分直接插入了内联的Css样式,懒得修改了,过段时间肯定要把footer去掉。

<div id="myFooter">

<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;

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新心得技巧学习
    热门心得技巧学习
    网页设计子分类