Use classes as sparingly as possible, because you can cascade the recognition, such as:. News H3 without having to add class to the H3
<div class= "News" >
<p></p>
</div>
3. With no existing elements to distinguish between the use of Div
<div id= "Mainnav" >
<ul>
<li>Home</li>
<li>about us</li>
</ul>
</div>
can be changed to
<ul id= "Mainnav" >
<li>Home</li>
<li>about us</li>
</ul>
4. Selector
p a H1 type selector
Li a {text-decoration:none} descendant selector
*{padding:0;} Universal selector, all elements of the page.
5. Positioning
Relative positioning is relative to where he was supposed to appear.
Absolute positioning is relative to the nearest positioned ancestor Element (the experiment found that ancestor elements need to set relative positioning)
The floating box can move around until its edge touches the edge of the containing box or another include box, because the floating box is not in the normal flow of the document, so the squares in the normal stream of the document act like a floating box does not exist.
Summary: If you let a div be floating, the next div would be the first one that doesn't exist. Know to encounter floating or containing boxes.
The right side of the Clear:right floating box is available
The left side of the Clear:left floating box is available
Clear:both floating box is not available on either side
The overflow property that applies a value of hidden or auto automatically cleans up any floating elements that are contained.
6. Gradient Background
Create a very high but very narrow gradient image, tile horizontally
Body
{
Background: #ccc url (gradient.gif) repeat-x;
}
But it is difficult to predict how high the image page, so you can combine the background color, when the image is over, the color comes out, if the difference between the two is very close, can not see the conversion.
Example: Add an icon to each heading
H1
{
padding-left:30px;
Background:url (/images/bullet.gif) No-repeat left center;
}
7. Highlight different types of links
such as: Link to external sites, mail, downloads, etc.
. external
{
Background:url (/images/externallink.gif) no-repeat right top;
padding-right:10px;
}
8. Table-Specific elements
1) Summary and caption
The summary attribute can be applied to the label of the table, describing the contents of the table
Caption the title of the table
2) thead tbody tfoot
I.e can place all column headings in the THEAD element, and if you choose to use THEAD or tfoot elements, you must use at least one TBODY element, a table can use only one thead and TFOOT, but multiple tbody can be used.
9. Table Border Model
1) separate model: Each cell has a border around it
2 Overlay Model: Cell shared border
10. Form layout
FieldSet closes the border, the lower version is not supported, but you can use
Filedset
{
Border:solid 0 transparent;
}
11. Forms Label Label
Implicit mode: <label>email <input name= "Email" type= "text"/></label>
Display mode:
<label for= "Email" >email</label>
<input name= "Email" id= "email" type= "text"/>
It is debatable whether paragraphs are used in a form.
12. Let the design play
Method One:
<body>
<div id= "wrapper" ></div>
<body>
#wrapper
{
width:720px;
margin:0 Auto;
}
But this way IE6 and not normal.
Method Two (needs to be combined according to two elements): using automatic whitespace
Body
{
Text-align:center;
min-width:760;
}
#wrapper
{
width:720px;
margin:0 Auto;
Text-align:left;
}
Method Three: Use positioning and negative whitespace change
#wrapper
{
width:720px;
position:relative;
left:50%;
Margin-left:-360;
}
13: Fluid Layout: Size is set in percent instead of pixel
Benefits: Varies with browser size width.
Disadvantage: Change the hour, the line narrows.
Resolve: Set min-width in pixels and EM
14: Elastic layout: When the font size changes, the row changes (unit with EM)
The elastic layout sets the width of the element relative to the font size.
1em=10px;
Most browsers default font size is 16px,10 equivalent to 16 pixels of 62.5%.
Body
{
font-size:62.5%;
}
#wrapper
{
Width:72em;
margin:0 Auto;
Text-align:left;
}
#mainNav
{
Width:18em;
Float:right;
}
15. Elastic fluid layout: With EM set width, the maximum width is set by percentage.
#wrapper
{
Width:72em;
max-width:100%;
margin:0 Auto;
Text-align:left;
}
16: Fluid and elastic images
Image distortion problem: Try to put it in the background
17. Asterisk HTML tricks
* HTML a:hover
{
Body-style:solid
}
Only IE6 or below useful
:!import and underline tricks
#nav
{
Position:fixed!important;
position:static;
}
Or
#nav
{
position:fixed;
_position:static;
}
19, when a few columns
<div id= "Main" >
<div id= "Nav" ></div>
<div id= "Content" ></div>
</div>
Nav need to distinguish color and display high 100%, you can do a picture, Width equals nav, main set background image, tile in the vertical direction.
