Practical tips for making front-end web page layout better with CSS-CSS Tutorial-php.cn

There are many techniques for CSS front-end web page layout. Here is a summary of CSS front-end web page layout tips suitable for novices, which may be more practical reference value for you:

1. The ul tag has a padding value by default in Mozilla, but in Mozilla In IE, only margin has a value.

2. The same class selector can appear repeatedly in a document, but the id selector can only appear once; use both class and id to define a label in CSS. If there are duplicate definitions, the definition made by the id selector is valid because the weight of ID is greater than CLASS.

3. A stupid way to adjust compatibility (IE and Mozilla):
Beginners may encounter such a situation: the attributes of the same label are set in IE It is normal to display it as A, but in Mozilla it must be set to B to display it normally, or the two are reversed.
Temporary solution:

选择符{属性名:B !important;属性名:A}

Copy after login

4. If there is some spacing between a group of tags to be nested, leave it to the margin attribute of the tag located inside instead of defining the tag located outside. The padding of the label
5. It is recommended to use background-image instead of list-style-image for the icon in front of the li tag.
6. IE cannot distinguish the difference between inheritance relationship and parent-child relationship. They are all inheritance relationships.
7. When adding selectors to your tags, don’t forget to add comments to the selectors in CSS. You will know why you do this when you modify your CSS in the future.

8. If you set a dark background image and bright text effect for a label. It is recommended to set a dark background color for your label at this time.

9. When defining the four states of a link, pay attention to the order: