DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 博客園CnBlogs自定義博客樣式分享
博客園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;
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved