css web page layout tips

Tips on front-end web page layout:

(Video tutorial recommendation: css video tutorial)

1. The ul tag is in Mozilla has a padding value by default, but 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 for a label in CSS definition. If the definition is repeated, the id The definition of the 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: it is normal for the same label attribute to be displayed in IE when it is set to A , and in Mozilla it must be set to B to display normally, or the two are reversed.

Temporary solution:

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

4. If there is some spacing between a group of tags to be nested, leave it to the margin attribute of the tag inside instead of defining it. The padding

5 of the outer label and the icon in front of the li label are recommended to use background-image instead of list-style-image.

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'll know why you do this when you modify your CSS later.

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

9. Pay attention to the order of defining the four states of the link:

Link Visited Hover Active

10. Please use background for pictures that have nothing to do with the content

11. The definition color can be abbreviated #8899FF =#89F

12. Table performs much better than other tags in some aspects. Please use it where column alignment is required.

13. 3f1c4e4b6b16bbbd69b2ee476dc4f83a There is no language attribute.

should be written like this:

<script type=”text/JavaScript”>

14. The title is the title, and the text of the title is the text of the title.
Sometimes the title does not necessarily need to display text, so:4a249f0d628e2318394fd9b75b4636b1Title content473f0a7621bec819994bb5020d29372a is changed to4a249f0d628e2318394fd9b75b4636b145a2772a6b6107b401db3c9b82c049c2Title content54bdf357c58b8a65c66d7c19c8e4d114473f0a7621bec819994bb5020d29372a

15. Perfect single-pixel outline table (can pass the test in IE5, IE6, IE7 and FF1.0.4 or above)

table{border-collapse:collapse;}
td{border:#000 solid 1px;}

16. For negative margin values, you can use absolute in the label It plays the role of relative positioning when positioning. When the page is displayed in the center, the left:XXpx attribute is not suitable for layers using absolute positioning. It's a good idea to place this layer next to a label that needs to be positioned relatively, and then use negative values ​​for margin.

17. When using absolute positioning, using margin value positioning can achieve positioning relative to its own position, which is different from the positioning of attributes such as top and left relative to the edge of the window. The advantage of absolute positioning is that it allows other elements to ignore its existence.

18. If the text is too long, change the long part into an ellipsis and display it: IE5, FF are invalid, but can be hidden, IE6 is valid

<p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

19. In IE When there may be text duplication problems caused by comments, you can change the comments to:

<!–[if !IE]>Put your commentary in here…<![endif]–>

20. How to use CSS to call external fonts
Syntax:

@font-face{font-family:name;src:url(url);sRules}

Get Value:

name: Font name. Any possible value of the font-family attribute
url(url): Use absolute or relative url address to specify the OpenType font file
sRules: Style sheet definition

21. How to make the text in a form Is the text in the box centered vertically?

If using row height and height grouping has no effect in FF, the way is to define upper and lower padding to achieve the desired effect.

22. Small issues to pay attention to when defining the A tag:

When we define a{color:red;}, it represents the four states of A. If you want to To define a mouse-over state, just define a:hover. The other three states are the styles defined in A.

When only one a:link is defined, be sure to remember to define the other three states!

23. Not all styles need to be abbreviated:

When the style sheet is defined such as p{padding:1px 2px 3px 4px}, another style will be added in the subsequent project. The padding is 5px and the bottom padding is 6px. We don't necessarily have to write p.style1{padding:5px 6px 3px 4px}. It can be written as p.style1{padding-top:5px;padding-right:6px;}. You may feel that writing it this way is not as good as the original one, but have you ever thought about it? Your writing method repeatedly defines the style. In addition, You don’t have to find out what the original lower and left padding values ​​are! If the previous style P changes in the future, the style of p.style1 you defined will also change.

24. The larger the website, the more CSS styles there will be. Before starting, please make full preparations and plans, including naming rules. Page block division, internal style classification, etc.

25. Several commonly used CSS styles:

1) Chinese character alignment:

text-align:justify;text-justify:inter-ideograph;

2) Fixed-width Chinese character truncation:

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(However, it can only handle text truncation on one line, not multiple lines.) (IE5 and above) FF cannot, it only hides.

3) Fixed-width Chinese character (word) line wrapping:

table-layout:fixed; word-break:break-all;

(IE5 and above) FF cannot.

4）61f67b2f528b9e0d9c17c529fb8b7f77文字839e87a4727ed0f54f182d54be97bbaf用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。

5）图片设为半透明：

.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}

在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）Flash透明：

选中swf,打开原代码窗口，在eb50c9ec568c9b96871b9e94a1ff3fd1前输入e68169da9b5fc79dddaec591ce5a232e 以上是针对IE的代码。

针对FIREFOX 给d8e2720730be5ddc9c2a3782839e8eb6 标签也增加类似参数wmode=”transparent”

7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img 
{
filter: alpha(opacity=45); 
}
.pictures a:hover img 
{
filter: alpha(opacity=90); 
}

图文教程推荐：CSS教程

The above is the detailed content of css web page layout tips. For more information, please follow other related articles on the PHP Chinese website!