That's how I do div layout code. I don't know what I mean, I'm not sure.
My idea is to be able to do this in the future: Assemble the page div layout with standard parts
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;}
The layout class has only one set, and style class can be defined a lot.
For example, to make a small 2-column layout inside the column
You can then define 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.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> combination class</title> <style> body, HTML {background: #fff; Color: #000; font-size:12px; margin:0; line-height:150%;p adding:0px; Text-align:center; }/* Layout of the large frame, used to control the overall page size, size by their own control/#layout {width:98%;margin:0 auto;text-align:left;} /* page left, middle, right layout/* L{float:left}. R{float:right}. M{width:auto}/* page left, middle, right layout class*/. Lclass{background: #ff0; Margin-right: -150px;width:150px;} . Mclass{background: #f00; margin:0 140px 0 150px;} . Rclass{background: #00f; Margin-left: -140px;width:140px;} . L1{background: #dd0; margin-right: -200px;width:200px;} . M1{background: #ee0; margin:0 0 0 200px;} . L2{background: #dd0; margin-right: -50px;width:50px;} . M2{background: #ee0; margin:0 0 0 50px;} </style> </pead> <body> <div id= "Layout" > <div class= "L Lclass" > Left & Lt;/div> <div class= "R rclass" > <div class= "L L2" >Here</div> <div class= "M m2" >there< ;/div> right </div> <div class= "M mclass" > Middle <div class= "L L1" >here1< ;/div> <div class= "M M1" >There1</div> </div> </div> </body> </ Html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
