弄了半个晚上的时间，总算马马虎虎搞好了博客的样式。整个博客是蓝色的基调，比较激情，我喜欢。比较郁闷的是，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; }
