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

 

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