That's how I do the div layout code. I don't know what to say.
My idea is that the future can be like this: using standard parts to assemble the page div layout
I divide the class into 2 kinds, layout class, Style class, layout class is skeleton, style class is clothes
As an example:
such as the left column in the layout
First of all its properties are: Left column, width, background color, font color, etc.
1. First, you define a class, such as. layout, which is used primarily to control the overall size of the page.
. layout{width:98%;margin:0 Auto;text-align:left;}
2. The 3 Basic layout Class (L,M,R) is then defined
. L{float:left}
. M{width:auto}
. R{float:right}
I also categorized the 2 column layout in the 3 column layout, because the 3 column layout, the left and right column width of 0 respectively, the 3 column becomes 2 column.
When we write the basic layout code, it's best to have a 3-column format.
3. corresponding to the layout class, define the desired style class, such as width, height, background color, and so on, which belong to the style element
. 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 the style class can be defined a lot.
For example, to make a small 2-column layout in the middle 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 like this
2 classes are referenced, separated by a space, the front is the layout class, followed by the style class, the following can continue to reference the space, if you need to define a special, you can give the div an ID to define.
Other commonly used style classes can also be written as generic, such as implicit 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> combo 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, to control the overall page size, the size of 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> left this there right middle Here1 there 1 </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
