Objective
Not until the next generation of web development technology, RIA technology mature, of course, but also to fight the HTML. A few days ago, "website refactoring" fried very hot,
These are advances that really give us new ideas. Here is a summary of some of the development of the bit experience.
Layout
1, up and down the layout
Just started to learn to make the page, with the MM DW software, visualization, so that more people learn to make Web pages.
Still remember to do the page or DW, a friend asked me the same sentence: "Do more Web Forms or use more layers, what is the difference?"
I told him that in fact DW uses layout-layout tables to quickly draw the entire page frame and then refine it step-by-step. Do the page is very fast things, suggest a table, with a layer of bad control position.
It's a bit misleading to think about it now. Ah, but maybe, progress requires a process.
"Website refactoring" Spring Breeze, with the layer of page layout does give us the development of new ideas.
Advantages:
The page is clearer and the amount of code is reduced;
CSS is more widely used.
Up and down, layered clear, code demo:
<div id= "Head" >
</div>
<div id= "Body" >
</div>
<div id= "Bottom" >
</div>
Left and right, you can use absolute positioning
#head {
Position:absolute
top;10px;
left:200px;
}
<div id= "Head" >
</div>
2, Div in the least nested div, available <p><span>
3, with padding control layer between the separation
<div>
</div>
<div style= "padding-top:10px" >
</div>
4, use the border to make the dividing line between the structure
<div style= "border-bottom:1px #000 solid" >
</div>
5, can use the CSS less use picture
Page Layout demo (can see the source code, than the previous table layout more clear):
Yun_qi_img/demo_div.jpg
Form
1, the form of the margin and padding
When you insert a form in a page, you always feel that margin,padding defaults to 0 and 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 same p tags or other tags.
2, select
The application of Optgroup
3. Add label for checkbox or Radio
<input id=today type=radio value= "Checked><label for=today > Today </label>
4, Button
The previous item used a button for the picture. Gradually discover the flaws in the application.
The suggestion or use CSS beautification.
In fact, CSS can achieve a more beautiful button
Table
You should use a table or a table. The table always has his winning side.
For example, some data shows the grid or the structure of a more uniform, branch-separated layout.
Table Related Tips
The application of CSS expressions
Use CSS to 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= ' #ffffff '},
Onmouseout=function ()
{this.style.backgroundcolor= ' #e5e5e5 '}
)
}
</style>
2,
Width:expression{document.body.clientwidth<800? "760": "1003"}
The Mark Worth noticing
<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>
