【原创】使用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 ;
}

 

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