Layout issues are very good insights

Preface
Before the next generation of Web Development Technology (RIA) is mature, it is necessary to fight against HTML. Some time ago, website reconstruction went viral,
These are all progress and indeed give us new ideas. Here we will summarize some experiences in development.

Layout
1. Layout
At the beginning, I learned how to create a page. I used the DW software of mm to visualize the page so that more people could learn how to create a webpage.
I still remember that DW was used for pages. A friend asked me the same sentence: "What is the difference between multiple webpage tables and multiple application layers? ".
I told him to use layout-layout tables in DW to quickly draw the frame of the entire page and refine it step by step. It is fast to do the page. We recommend that you use a table and use a layer to control the location.
It seems a bit misleading. Ha, but maybe, progress requires a process.

The spring breeze of "website reconstruction" brings us a new idea of developing with the layout of pages on the layer.
Advantages:
The page is clearer,CodeDecrease;
CSS is more widely used.

Upper and lower layers, clear layers, code Demo:
<Div id = "head">
</Div>

<Div id = "body">
</Div>

<Div id = "bottom">
</Div>

Left and right rows. You can use absolute positioning.
# Head {
Position: absolute
Top; 10px;
Left: 200px;
}
<Div id = "head">
</Div>

2. Use as few Div units as possible in the Div. <p> <span>

3. Separated By padding control Layers
<Div>
</Div>
<Div style = "padding-top: 10px">
</Div>

4. Use border to create a separation line between Structures
<Div style = "border-bottom: 1px #000 solid">
</Div>

5. Images with less CSS

Page Layout demo (you can view the source code, which is much clearer than the previous table layout ):
Http://davidblog.blogdriver.com/davidblog/inc/demo_div.jpg

Form
1. Form margin and padding
In the past, when inserting a form on a page, I always felt that margin and padding are not 0 by default, which sometimes affects the layout of the page.
You can use CSS to add 0
FORM {
Margin: 0 0 0 0px;
Padding: 0 0 0 0px;
}
You can also define the p Mark or other mark.

2. Select
Optgroup applications

3. Add label to checkbox or radio
<Input id = Today type = radio value = "" Checked> <label for = today> today </label>

4. Button
The previous project uses the image button. Gradually discover defects in applications.
We recommend that you use CSS to beautify the image.
In fact, CSS can achieve a more beautiful button

Table
You must use a table. Table always has its own advantages.
For example, the grid or structure of some data is relatively unified, and the layout of branches is divided.
Table related skills

CSS expressions Application
CSS applications can reduce code writing.
1. Table mouse events
<Style>
Tr {
Background-color: expression (this. rowindex % 2 = 0 )? "# E5e5e5": "# e5e5e5 ");
Ryo: expression (
Onmouseover = function ()
{This. style. backgroundcolor = '# ffff '},
Onmouseout = function ()
{This. style. backgroundcolor = '# e5e5e5 '}
)
}
</Style>

2,
Width: expression {document. Body. clientwidth <800? "760": "1003 "}

Worth noting
<Menu>
<Li> menu 1 </LI>
<Li> menu 2 </LI>
</Menu>
<Ul>
<Li>
<DD>
<Tt>
<U>
<Fieldset>
<Legend> Health Information: </legend>
Height <input type = "text" size = "3"/>
Weight <input type = "text" size = "3"/>
</Fieldset>
<Sup> superscript </sup>