Class Combination implements DIV+CSS layout

Now writing XHTML, we strongly do not recommend this method, should be id,class comprehensive application. This article is only about a thinking, not the way to build the station process!

Use standard parts to assemble the page div layout. I divide class into 2 categories: Layout class, Style class.

Layout class is skeleton, style class is clothes.

For example: The left column in the layout. First of all, its properties are: The left column, width, background color, font color and so on.

1, first will define a class, such as:. Layout, mainly used to control the entire size of the page

. layout{width:98%;margin:0 Auto;text-align:left;}

2, then define 3 Basic layout class (L,m,r)

. L{float:left}

. M{width:auto}

. R{float:right}

I have 2 column layout also categorized in the 3 column layout, because the 3 column layout, the left and right column width is 0, 3 columns into 2 columns.

When we write basic layout code, it's best to be written in the 3 column format.

3, corresponding to the layout class, define the required style class, such as width, height, background color, etc. these are all style elements

. Class_l{background: #ff0; margin-right: -150px;width:150px;}

. Class_m{background: #f00; margin:0 140px 0 150px;}

. Class_r{background: #00f; Margin-left: -140px;width:140px;}

The layout class has only one set, and style class can be defined a lot. For example, to the middle of the column inside a small 2 column layout, you can define a style class.

. Mid_l{background: #ff0; margin-right: -100px;width:100px;}

. Mid_m{background: #f00; margin:0 0 0 100px;}

4. Combine layout class and style class to quote in code such as:

2 classes are referenced, the middle with a space, the front is the layout class, followed by style class, you can continue to follow the space reference, if you need a special definition, you can give this div take an ID to define.

Some of the other common style classes can also be written in general, such as implicitly can be defined as

. Hide{display:none} when needed, class= "xxx hide" to refer to.

Sample Code browsing: http://tech.ddvip.com/yssl/29811/29815_1.html