Jin's Div layout is compatible with "Wulin Tips"

1. How to Learn Div

First, master the CSS and HTML syntax. In CSS, in addition to general syntax, especially float, clear, overflow, line-height, etc., HTML tags focus on Div, UL, Li, DL, DD, and so on.
Second, in fact, the best tutorial for div is to study the practices of the QQ .com 163.com sohu.com ifeng.com portals. If you cannot understand such a large website, refer to www.ccopen.net developed with students in my lecture.
And www.chinajwork.org.

2. How to Make Div compatible:

Jin's compatibility (IE6, IE7, ff) Statement:

Only compatible with Iot platform;
Unified by default, as far as possible;
High, low, and high,
The regulations are complete, so you can achieve success!
(From www.zuoyefeng.com
)

Be compatible with Iot Platform


After a floating label is used (float: left), the following Div must clear the floating (clear: Left ;).

In this way, you can be compatible with IE6, IE7, and ff. Otherwise, the layout will be messy.
Example:
<Div style = "float: Left; width: 200px;"> 1 </div>
<Div style = "float: Right; width: 200px;"> 2 </div>
<Div style = "clear: Left; width: 200px;"> 3 </div>

Unified default, as far as possible, zero

Different browsers have different default values. For example, the margin attributes of UL Li tags are different. Therefore, when creating a website, we must first define some global style sheets to constrain the whole site and count the default values. To achieve the purpose of compatibility, this is called "unified default", which is exactly "centralized thinking, united front ".

<Style>
Ul, Li, body {margin: 0px; padding: 0px ;}
Div, table {margin: 2px; padding: 2px; overflow: hidden ;}
</Style>

When using Divs, we should specify their margin and padding values as much as possible. Do not set them to 0 if no spacing is required.

High, low, and high

These two points are the most important and can be described as experience. When you define the height of a DIV, you must define the line-height ). This practice is especially important for Internet Explorer 6 and Internet Explorer 7 compatibility.
Ratio
For example, <Div style = "height: 2px"> </div>
This divear div is different in IE6 and IE7, with the addition of <Div
Style = "height: 2px; line-Height: 2px;"> </div> or <Div
Style = "height: 2px; overflow: hidden;"> </div>.
Therefore, if a height parameter is set to a height parameter, overflow or line-height must be defined, or both are defined. This parameter is compatible.

If you want text or images to open the DIV, do not define the height. On the contrary, if you define the height, ie can usually open, but FF cannot.
At the same time, when you do not want the DIV to be opened, you will define the height and width. At this time, you 'd better define another overflow: hidden; no scroll bar; overflow: auto; automatic. In short, the DIV does not define the height. The content can open the DIV, that is, the DIV follows the content, so it is "not high ".

The regulations are complete, so you can achieve success!

Finally, I am talking about the habit of programming, Div, and code writing, that is, to "be as elegant and comfortable as a poem, be careful with scrutiny; be as beautiful as a landscape ". Because what you write is messy, the more you write, the more chaotic it will be. The final project of the bean curd residue will be. It will not only be difficult to modify in the future, but you cannot reuse it.

OK. With my words, you can solve more than 90% of your Div programming problems.