【原創】使用Css修改自己部落格的版面顯示

想著要修改自己的部落格，是因為見到別人的部落格都是整版顯示，而我的卻是只佔據了中間部分，加上我又會一點點Css，所以就進行了一下修改，也就有了這篇文章。

一、必備的工具

1、比較方便的查看頁面元素的firefox外掛程式firebug，當然也可以使用同類軟體

2、Css編輯工具可用可不用了，反正也不是什麼大修改

二、修改開始

1、blog自動撐滿整個瀏覽器

用firebug可以看到，部落格的整個頁面容器元素的ID為container，而預設的寬度是900px,則添加如下代碼,這裡不選中100%,是為了在左右兩邊留些空隙

 

#container
{
width:98%;
}

2、調整側邊欄在左邊

預設是在右邊，這個如果大家喜歡在右邊就可以很多東西都不用改了，使用預設就好，不過學習下也不錯吧，呵呵。我這裡順便加了些邊框。

#sidebar-a
{
float:left;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
margin:auto;
}

3、最佳化第二步調整

經過第二步，大家會發現文章區和側邊欄有些地方重合在一起了，不用急，添加如下代碼：

#content
{
margin-right:0;
margin-left:220px;
}

 4、再最佳化一些細節

其實經過第三步，大致上已經可以了，我這裡再提供一些細節美化的代碼

#sidebar-a h3 
{
color:#99CCFF;
font-size:1.2em;
margin-left:0.5px;
}
#q
{
width:100%;
}
#Calendar1_entryCal
{
width:200px;
}
.post
{
margin-right:0;
border-right:1px solid #666666
}
.post img
{
border-width:0;
}
#btnZzk
{
color:white;
}

 

大工告成，是不是很有成就感，呵呵