I believe that friends who have studied CSS all know CLASS. I don’t know how you use it when making web pages. This is how I make DIV layout code. I don’t know if it’s clear or not, let’s take a look.
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 has its attributes
:: It is the 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 also classify the 2-column layout into the 3-column layout, because In a 3-column layout, when the widths of the left and right columns are 0 respectively, 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 need to do it in the middle column A small 2-column layout 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
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.
Others Some commonly used style classes can also be written as universal. For example, implicit can be defined as
.hide{display:none}.
In this case, it can be directly referenced with class="xxx hide" in useful places. Isn't it very convenient? You can also write down your good experiences and share them