Use as few classes as possible, because you can cascade recognition, such as:. News H3 without having to add classes on H3
3. If no existing elements are differentiated, then use div
can be changed to
4. Selector
p a H1 type selector
Li a {text-decoration:none} descendant selector
*{padding:0;} Universal Selector, page all elements.
5. Positioning
Relative positioning is relative to where he should have been.
Absolute positioning is relative to the nearest positioned ancestor element (experiment found that ancestor elements need to set relative positioning)
A floating box can move left and right until its edge touches the edge of the containing box or another containing box, because the float box is not in the normal flow of the document, so the block in the document's normal flow behaves as if the 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 touch a floating or contained box.
Clear:right the right side of the float box is available
Clear:left the left of the float box is available
Clear:both floating box is not available on either side
Applying the overflow property with a value of hidden or auto automatically cleans up any floating elements that are contained.
6. Gradient Background
Create a very high but 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 end of the image, the color will come out, if the two chromatic aberration is very close, can not see the conversion.
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
such as: links to external sites, mail, download, 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 table's label, 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, one table can use only one thead and TFOOT, but you can use multiple tbody.
9. The border model of the table
1) separate model: Each cell has a border around it
2) Overlay model: Cell sharing border
10. Form layout
FieldSet closed border, low version not supported, but can be used
Filedset
{
Border:solid 0 transparent;
}
11. Form Labels Label
Implicit way: Email
Display mode:
Email
The use of paragraphs in a form is controversial.
12. Let the design play
Method One:
#wrapper
{
width:720px;
margin:0 Auto;
}
But this way IE6 and a little bit abnormal.
Method Two (need to unite according to two elements): Use automatic whitespace
Body
{
Text-align:center;
min-width:760;
}
#wrapper
{
width:720px;
margin:0 Auto;
Text-align:left;
}
Method Three: Use positional and negative whitespace to change
#wrapper
{
width:720px;
position:relative;
left:50%;
Margin-left:-360;
}
13: Fluid Layout: Dimensions are all set in percent rather than pixel
Pros: Varies with browser size width.
Cons: Variable hours, narrow lines.
Workaround: Set the min-width in pixels and EM units
14: Elastic layout: When the font size changes, the line changes (units 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. Flexible Fluid layout: Set the width with EM and set the maximum width with a 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 under useful
:!import and underline tricks
#nav
{
Position:fixed!important;
position:static;
}
Or
#nav
{
position:fixed;
_position:static;
}
19, a few columns when
The NAV needs to be color-coded and display a height of 100%, can make a picture, Width equals nav, main has a background image, tile in the vertical direction.
