CnBlogs自定义博客样式

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

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

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

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

1 <div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">2   <p id="myFootText">知识改变命运，码农拯救人生</p>3   <p id="myFootCopy">ohmygirl@2014</p>4 </div>

2. 同时去掉了文章底部烦人的推广链接和广告banner。看着清净了不少，CSS代码为：

1 /* advertise */2 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{3     width:0;4     height:0;5     display:none;6     overflow:hidden;7 }

3.文章底部的评论按钮的位置和大小都比较尴尬，位置太靠左，且可点击范围太小。这里一并贴出来：

 1 #RecentCommentsBlock li { 2     margin: 0; 3     width: 275px; 4 } 5 #RecentCommentsBlock li.recent_comment_body { 6     border-radius: 0; 7     margin: 0; 8 } 9 #RecentCommentsBlock li.recent_comment_title {10     border-radius: 5px 5px 0 0;11     margin: 3px 0 0;12 }13 #RecentCommentsBlock li.recent_comment_author {14     border-radius: 0 0 5px 5px;15     margin: 0;16 }17 .desc_img{18    width:75px;19    max-width:75px;20 }21 22 #blog-calendar{23     background:white;24 }25 26 /* comment */27 div.commentform{28     margin-bottom:100px;29 }30 #commentform_title {31     background: url("http://static.cnblogs.com/images/icon_addcomment.gif") no-repeat scroll 0 2px;32     color: #0078d8;33     font-size:14px;34 }35 div.commentform p{36     margin-bottom:10px;37 }38 .comment_btn {39     height: 35px;40     width: 90px;41     background: none repeat scroll 0 0 #0078d8;42     border: 0 none;43     border-radius: 5px;44     color: white;45     cursor:pointer;46 }47 .comment_btn:hover{48     background:#317ef3;49 }50 #commentbox_opt,#commentbox_opt + p {51     text-align:center;52 }53 #tbCommentBody{54     width:100%;55     resize:none;56 }57 #tbCommentAuthor,#tbCommentBody{58    border:1px solid #0078d8;59 }60 #tbCommentBody:hover{61    border:1px solid #fca021;62 }63 #comments > h3 {64     background: none repeat scroll 0 0 #0078d8;65     border-radius: 3px;66     color: white;67     padding: 8px;68     border:0 none;69     font-size:14px;70 }71 #comments{72     font-size: 13px;73 }74 #comments h4{75     margin-top:10px;76 }77 #comments h4 span {78     color: #6c6351;79     font-size: 12px;80 }81 .comment_actions {82     border-bottom: 1px dashed #0078d8;83     display: block;84     padding-bottom: 10px;85 }86 .blog_comment_body {87     color: #111;88     font-size: 13px;89     margin-bottom: 10px;90     margin-top: 10px;91 }92 #comment_nav {93     font-size: 14px;94     margin-top: 10px;95     text-align: right;96 }

最后，博客主题部分的css代码为：

  1 /* header */  2 #header{  3     border:1px solid #044e97;  4     background:#0078d8 repeat;  5     box-shadow:0 0 5px;  6 }  7 h1{  8     background: none;  9     border-bottom:0 none; 10 } 11 #main{ 12     margin-top:5px; 13     border-right:0 none; 14     min-height:1040px; 15 } 16 #Header1_HeaderTitle{ 17     color:white; 18     font-weight:bold; 19     font-size:24px; 20     text-shadow:1px 5px 1px #000; 21 } 22 #Header1_HeaderTitle:hover{ 23     color:#fca021; 24 } 25 #tagline{ 26     color:white; 27 } 28 p.date{ 29     background: none repeat scroll 0 0 #0078d8; 30     border-bottom: 1px solid #aaa; 31     border-radius: 5px; 32     color: white; 33     font-size: 14px; 34     font-weight: bold; 35     margin: 10px 10px 0 50px; 36     padding: 10px; 37 } 38 .postFoot, p.postFoot{ 39     padding-bottom:2px; 40     border-bottom:1px solid #0078d8; 41 } 42 .postTitle{ 43     padding:5px 0; 44 } 45 .postTitle a{ 46     font-size:15px; 47     padding:2px 0; 48 } 49 .post h2{ 50     border-bottom: 1px dashed #0078d8; 51     font-size: 1em; 52     margin-top: 10px; 53     padding: 0 0 10px; 54 } 55 .c_b_p_desc_readmore:hover{ 56     color:#faa123; 57 } 58 #cb_post_title_url{ 59     font-size:18px; 60 } 61 #MySignature{ 62     border: 1px dashed #0078d8; 63     display: block; 64     padding: 5px; 65 } 66 #green_channel{ 67     border: 1px dashed #0078d8; 68 } 69  70 /* right menu */ 71 #rightmenu{ 72     border:1px solid #0078d8; 73     background:#0078d8; 74     border-radius:10px; 75 } 76 #rightmenu ul{ 77     background:white; 78 } 79 #rightmenu li{    80     background: none repeat scroll 0 0 #3385ff; 81     border: 1px solid #3385ff; 82     border-radius: 5px; 83     color: white; 84     margin: 10px; 85     padding: 5px; 86     width: 150px; 87 } 88 #rightmenu li a{ 89     color:white; 90     padding-left:10px; 91 } 92 #rightmenu li:hover{ 93     background:#317ef3; 94 } 95 #rightmenu h3{ 96     color:white; 97     padding:2px 0 5px 10px; 98     font-size:18px; 99     border:0 none;100 }101 102 #blog-calendar{103     background:white;104 }105 div.commentform{106     margin-bottom:100px;107 }108 /* advertise */109 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{110     width:0;111     height:0;112     display:none;113     overflow:hidden;114 }115 116 /* calendar */117 .Cal{118     border:0 none;119     width:100%;120     height:200px;121     font-size:14px;122 }123 .CalTitle{124     font-size:15px;125 }126 .CalTodayDay{127     background:#0078d8;128 }129 .CalTodayDay a u{130     color:#fc6700;131     text-decoration:none;132 }