[Original] Use CSS to modify the layout of your blog

I want to modify my blog because I only occupied the middle part of my blog and added a little bit of CSS, this article is also available.Article.

I. Necessary tools

1. Firefox plug-in firebug that allows you to conveniently view page elements. You can also use similar software.

2. the CSS editing tool is no longer available. It is not a big modification anyway.

Ii. Start Modification

1. the blog will automatically fill the entire browser

Firebug shows that the container element ID of the entire blog page is container, and the default width is 900px. Add the followingCode100% is not selected here to leave some gaps between the left and right sides

 

# Container
{
Width : 98% ;
}

2. Adjust the sidebar to the left

The default value is on the right. If you like it on the right, you don't need to change a lot of things. It's good to use the default value. I added some borders here.

# Sidebar-
{
Float : Left ;
Border-Right : 1px solid #666666 ;
Border-bottom : 1px solid #666666 ;
Margin : Auto ;
}

3. Optimization Step 2 Adjustment

After the second step, you will find that some parts of the article area and the sidebar overlap and don't worry. Add the following code:

# Content
{
Margin-Right : 0 ;
Margin-left : 220px ;
}

4. Optimize some details

In fact, after the third step, it is basically enough. I will provide some detailed code here.

# Sidebar-A h3
{
Color : #99 CCFF ;
Font-size : 1.2em ;
Margin-left : 0.5px ;
}
# Q
{
Width : 100% ;
}
# Calendar#entrycal
{
Width : 200px ;
}
. Post
{
Margin-Right : 0 ;
Border-Right : 1px solid #666666
}
. Post img
{
Border-Width : 0 ;
}
# Btnzzk
{
Color : White ;
}

 

Success! Is it a sense of accomplishment?