Summary of CSS web page layout tips

This article brings you a summary of CSS web page layout tips. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

1. The ul tag has padding value by default in Mozilla, but only margin in IE. There is 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: Selector {Attribute name: B !important; Attribute name: A}

4. If there is some spacing between a group of tags to be nested, then Leave it to the margin attribute of the label located inside, instead of defining the padding

of the label located outside. 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'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 when defining the four states of a link: Link Visited Hover Active

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

11. You can define colors Abbreviation #8899FF=#89F

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

13. <script> does not have the language attribute. It should be written like this: <script type=”text/JavaScript”></script>

14. The title is the title, and the text of the title is the title. Text. Sometimes the title does not necessarily need to display text, so:

Title content

is changed to

Title content

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

Example Source Code

The code is as follows:

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

16. Margin is taken Negative values ​​can play a role in relative positioning when the label uses absolute positioning. When the page is centered, 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”>

For example, there is a line The text is very long and cannot be displayed on one line in the table.

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

Example Source Code

The code is as follows:

<!–[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}

Value:

name: font name. Any possible value of the font-family attribute

url (url): Specify the OpenType font file using an absolute or relative url address

sRules: Style sheet definition

21. How Center text vertically in a text box in a form?

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:

当样式表前定义了如p{padding:1px 2px 3px 4px}时，在后续工程中又增加了一个样式上补白5px，下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好，但你想没想过，你的那种写法重复定义了样式，另外你可以不必去找原来的下补白与左补白的值是多少！如果以后前一个样式P变了话，你定义的p.style1的样式也要变。

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

25、几个常用到的CSS样式：

1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。

3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。

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

5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；

6）Flash透明：选中swf,打开原代码窗口，在前输入 以上是针对IE的代码。

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

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

.pictures img {
filter: alpha（opacity=45）； }
.pictures a:hover img {
filter: alpha（opacity=90）； }

以上就是对CSS网页布局小技巧汇总的全部介绍，如果您想了解更多有关CSS3教程，请关注PHP中文网。

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