Practical tips for making front-end web page layout better with CSS

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}

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:

Link Visited Hover Active

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

#11. The defined 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. <script> does not have the language attribute<strong> It should be written like this: <br/><pre class='brush:php;toolbar:false;'>&lt;script type=”text/JavaScript”&gt;</pre></script>

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:

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)

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

16. Negative margin The value can play a role in relative positioning when the label uses absolute 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: invalid in IE5 and FF, but can be hidden, valid in IE6

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

19. In IE, when the text duplication problem may be caused by comments, you can change the comments to:

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

20. How to call it with CSS External fontSyntax:

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

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 a form Center the text in a text box 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 At this time, to define a state where the mouse is placed, 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}, it will be added in the subsequent project The top padding of a style 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、网站越大，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); }

The above is the detailed content of Practical tips for making front-end web page layout better with CSS. For more information, please follow other related articles on the PHP Chinese website!