Combine CLASS to complete web page layout style_CSS/HTML

This is how I make the DIV layout code. I don’t know if it’s clear or not, let’s take a look together
My idea is that in the future: Use standard parts to assemble the web page DIV layout

I divide classes into 2 types, layout class, style class, layout class is the skeleton, style class is the clothes
For example:
For example, the left column in the layout
First of all, its attributes are: left column, width, background Color, font color, etc.

1. First, a class will be defined, such as: .layout, which is mainly used to control the entire size of the page
.layout{width:98%;margin:0 auto;text-align:left;}

2. Then 3 basic layouts Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
I put The 2-column layout is also classified as the 3-column layout, because in the 3-column layout, when the width of the left and right columns is 0 respectively, 3 columns become 2 columns.
When we write the basic layout code, it is best to write it in a 3-column format.

３． 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;}

There is only one set of layout classes , many style classes can be defined.
For example, if you want to make a small two-column layout in the middle column
, you can define another style class
.mid_l{background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4. Combine the layout class and the style class, and reference it in the code like this


Quote both classes and separate them with spaces. , the front is the layout class, the latter is the style class, and you can continue to use space quotes later. If you need to define it specially, you can give this div an id to define.

Some other commonly used style classes It can also be written in a general way. For example, implicit can be defined as
.hide{display:none}
and then when needed, class="xxx hide" can be used to reference it, which is very convenient.