Use less classes as much as possible, because they can be identified in layers, such as. News h3 without adding classes to h3.
<Div class = "News">
<H3> <H2> <P> </p>
</Div>
3. Use div without distinguishing existing elements
<Div id = "mainNav">
<Ul>
<Li> Home </li>
<Li> About Us </li>
</Ul>
</Div>
You can change it
<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;} General selector, all elements on the page.
5. Positioning
Relative positioning is relative to the location where he should have appeared
Absolute positioning is relative to the recently located ancestor element (the experiment found that the ancestor element needs to be set relative positioning)
A floating box can be moved left and right until its edge hits the edge of the contained box or another contained box, because the floating box is not in the normal stream of the document, therefore, the blocks in the normal stream of the document behave as if the floating box does not exist.
Conclusion: If a div is floating, the next div will be the first div that does not exist. Know the floating or contained box.
Clear: available on the right side of the right floating box
Clear: available on the left of the left floating box
Clear: both sides of the both floating box are unavailable
The overflow attribute with the application value "hidden" or "auto" will automatically clear any floating elements contained.
6. gradient background
Create a very high but narrow gradient image, horizontally tiled
Body
{
Background: # ccc url (gradient.gif) repeat-x;
}
However, it is hard to predict how high the image page is, so we can combine the background color. When the image ends, the color will come out. If the color difference between the two is very close, we cannot see the conversion.
For example, add an icon to each title.
H1
{
Padding-left: 30px;
Background: url (/images/bullet.gif) no-repeat left center;
}
7. highlight different types of links
For example, links to external sites, emails, 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 table tags to describe table content.
Caption table title
2) thead tbody tfoot
I. e. You can place all column headers in thead element. If you choose to use thead or tfoot element, you must use at least one tbody element. A table can only use one thead and tfoot, however, multiple tbodies can be used.
9. Table border Model
1) Independent Model: each cell has a border around it.
2) Overlapping model: cell sharing border
10. form layout
Fieldset disables borders, which is not supported in earlier versions, but can be used
Filedset
{
Border: solid 0 transparent;
}
11. Form 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"/>
Whether to use paragraphs in a form is controversial.
12. Let the design Drama
Method 1:
<Body>
<Div id = "wrapper"> </div>
<Body>
# Wrapper
{
Width: 720px;
Margin: 0 auto;
}
However, IE6 is abnormal.
Method 2 (two elements need to be combined): Use Automatic Blank
Body
{
Text-align: center;
Min-width: 760;
}
# Wrapper
{
Width: 720px;
Margin: 0 auto;
Text-align: left;
}
Method 3: Use orientation and negative value blank to change
# Wrapper
{
Width: 720px;
Position: relative;
Left: 50%;
Margin-left:-360;
}
13: Fluid layout: The size is set in percentages instead of pixels.
Advantage: varies with the browser size and width.
Disadvantage: the number of hours decreases and the number of rows decreases.
Solution: Set min-width in pixels and em.
14: elastic layout: When the font size changes, the line changes (unit: em)
The auto layout is used to set the element width relative to the font size.
1em = 10px;
The default font size of most browsers is 16 PX, and 10 is equivalent to 62.5% of 16 pixels.
Body
{
Font-size: 62.5%;
}
# Wrapper
{
Width: 72em;
Margin: 0 auto;
Text-align: left;
}
# MainNav
{
Width: 18em;
Float: right;
}
15. elastic fluid layout: Set the width with em and set the maximum width with percentages.
# Wrapper
{
Width: 72em;
Max-width: 100%;
Margin: 0 auto;
Text-align: left;
}
16: fluid and elastic Images
Image deformation problem: try to put it in the background
17. asterisks HTML tricks
* Html a: hover
{
Body-style: solid
}
Only available in IE6 or lower
18 :! Import and underline
# Nav
{
Position: fixed! Important;
Position: static;
}
Or
# Nav
{
Position: fixed;
_ Position: static;
}
19. When there are several columns
<Div id = "main">
<Div id = "Nav"> </div>
<Div id = "Content"> </div>
</Div>
The Nav must be color-differentiated and display height of 100%. You can create an image with the width equal to Nav. The background image is set on main and tiled vertically.
