This is how I make the DIV layout code. I don’t know if it’s clear or not. Let’s take a look.
My idea is that in the future, we can use standard parts to assemble web page DIV layout
I divide classes into two types, layout class and style class. Layout class is the skeleton and style class is the clothes.
For example:
For example, the left column in the layout
First of all, its properties 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 layout Class(l,m,r) will be defined
.l{float:left}
.m{width:auto}
.r{float:right}
I also classify the 2-column layout into the 3-column layout, because in the 3-column layout, when the width of the left and right columns is 0, 3 columns become 2 columns.
When we write basic layout code, it is best to write it in a 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;}
There is only one set of layout classes, but many style classes can be defined.
For example, 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 style class and reference them in the code like this
<div class=l class＿l></div>
<div class=l mid_l></div>
Quote both classes, separated by spaces. The first one is the layout class, and the second one is the style class. You can continue to quote the two classes with spaces. If you need to define it specially, you can give this div an id to define.
Some other commonly used style classes can also be written as universal, for example, implicit can be defined as
.hide{display:none}
Then when needed, use class=xxx hide to reference it, which is very convenient.
Code: