弄了半个晚上的时间,总算马马虎虎搞好了博客的样式。
整个博客是蓝色的基调,比较激情,我喜欢。
比较郁闷的是,rightmenu 和 main都是position:absolute 布局的。要添加一个footer,还真是被恶心到不行,现在虽然做成了position:fixed的,但标签和随笔增多的时候,肯定会覆盖一部分内容。没有js权限, 暂时先放着吧。
1. footer的代码:MyFooter部分直接插入了内联的Css样式,懒得修改了,过段时间肯定要把footer去掉。
1 <div id="myFooter" style="position: fixed; bottom: 0px; 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 }