CSS class in Web page layout with flexible application

I believe that the friends who have studied CSS know class this thing, do not know how you usually make the page when the application, I am so to do div layout code. I don't know what I mean, I'm not sure.

I divide class into 2 kinds, layout class, Style class, layout class is skeleton, style class is clothes

As an example:

Like the left column in the layout.

First of all, its properties are: The left column, width, background color, font color, etc.

1. First, you define a class, such as:. Layout, mainly used to control the size of the page

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

2. Then 3 basic layout Classes (L,M,R) are defined

.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 style class you need, 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;}

There is only one set of layout classes, and the style class can be defined a lot. For example, to be in the middle of a small 2-column layout can be defined 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 reference in code

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}

In this way, it is convenient to refer directly to class= "xxx hide" where it is useful. You can also write down your good experiences and share them.