Experience Sharing: CSS combination class to complete the page layout style

css| Web page

That's how I 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

<div class= "L class_l" ></div>
<div class= "L mid_l" ></div>

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}

Then when needed, class= "xxx hide" to quote, very convenient.