When you get the page, analyze it first.
1, must understand the layout structure of the page, so-called layout modules (such as large sections, such as the head, navigation, search module, main content area, footer, etc.).
2, the layout module to the sub-naming: reference CSS naming norms;
3, observe the common elements of the module, the analysis of CSS can be modular, first, the approximate structure;
4, initialize the CSS: Do not copy the big company's website, their own tailor-made, their own use of the label, the label itself to remove the style, no use of the label can not be set.
Common Reset tags are:
The label used {margin:0; padding:0;}
em {font-style:nomal;}//default is oblique, need to be righting first.
Li {list-style:none;} By default, small dots or numbers appear, and they are removed.
a {text-decoration:none;} The default is underlined and removed.
img {border:none;} When the picture is in a link, it will appear the border, remove.
Input,textarea {outline:none;} By default, an outer dashed line appears, which is removed.
Table {border-collapse:collapse;} The spacing between table cells is removed.
body {font-size:xxpx; font-family:xxxx;} Set the default font and size according to the actual situation.
5, the common style of preparation:
Common Public styles:
Wrap: Wrap layer, commonly used to wrap the module, set the center;
FL: Left floating;
FR: Floating right;
Clear: Remove floating;
...... Write code process, encountered at any time to add to the public style sheet;
6, according to the CSS analysis to start div layout, block layout, independent module recommended ID, reuse style recommended class.
First chunk, then slowly fill small details;
First horizontal, after vertical row;
More Thoughts:
CSS style sheet planning and management
What's with the handwriting div+css