Conseils pratiques pour CSS pour améliorer la mise en page des pages Web frontales

Il existe de nombreuses techniques pour la mise en page frontale CSS. Voici un résumé des conseils de mise en page Web front-end CSS adaptés aux novices, qui peuvent être une valeur de référence plus pratique pour vous :

1 La balise ul a une valeur de remplissage par défaut dans Mozilla, et dans Mozilla, il a une valeur de remplissage. Dans IE, seule la marge a une valeur.

2. Le même sélecteur de classe peut apparaître à plusieurs reprises dans un document, mais le sélecteur d'identifiant ne peut apparaître qu'une seule fois ; utilisez à la fois la classe et l'identifiant pour définir une étiquette en CSS. définitions, la définition faite par le sélecteur d'identifiant est valide car le poids de ID est supérieur à CLASS.

3. Une façon stupide d'ajuster la compatibilité (IE et Mozilla) :
Les débutants peuvent rencontrer une telle situation : les attributs d'un même label sont définis dans IE It. Il est normal de l'afficher sous la forme A, mais dans Mozilla, il doit être défini sur B pour l'afficher normalement, sinon les deux sont inversés.
Solution temporaire :

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

4. S'il y a un certain espacement entre un groupe de balises à imbriquer, laissez-le à l'attribut margin de la balise à l'intérieur au lieu de le définir. l'étiquette située à l'extérieur est
5. Il est recommandé d'utiliser background-image au lieu de list-style-image pour l'icône devant la balise li.
6. IE ne peut pas faire la différence entre la relation d'héritage et la relation parent-enfant.
7. Lorsque vous ajoutez des sélecteurs à vos balises, n'oubliez pas d'ajouter des commentaires aux sélecteurs en CSS. Vous saurez pourquoi vous faites cela lorsque vous modifierez votre CSS à l'avenir.

8. Si vous définissez une image d'arrière-plan sombre et un effet de texte clair pour une étiquette. Il est recommandé de définir une couleur de fond sombre pour votre étiquette à ce stade.

9. Faites attention à l'ordre lors de la définition des quatre états d'un lien :

Link Visited Hover Active

10. Veuillez utiliser l'arrière-plan pour les images. qui n'ont rien à voir avec le contenu

11. La couleur définie peut être abrégée #8899FF=#89F

12. d'autres balises dans certains aspects. Veuillez l'utiliser là où l'alignement des colonnes est requis.

13. 3f1c4e4b6b16bbbd69b2ee476dc4f83a n'a pas l'attribut de langue
Il doit être écrit ainsi :

<script type=”text/JavaScript”>

14. Le titre est le titre, et le texte du titre est le texte du titre.
Parfois, le titre n'a pas nécessairement besoin d'afficher du texte, donc : 4a249f0d628e2318394fd9b75b4636b1Contenu du titre473f0a7621bec819994bb5020d29372a est remplacé par 4a249f0d628e2318394fd9b75b4636b145a2772a6b6107b401db3c9b82c049c2Contenu du titre54bdf357c58b8a65c66d7c19c8e4d114473f0a7621bec819994bb5020d29372a

15. Tableau de contour parfait à un seul pixel (peut réussir le test dans IE5, IE6, IE7 et FF1.0.4 ou supérieur)

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

16. ​​peut jouer un rôle dans le positionnement relatif lorsque l'étiquette utilise le positionnement absolu Lorsque la page est affichée au centre, l'attribut left:XXpx ne convient pas aux calques utilisant le positionnement absolu. C'est une bonne idée de placer ce calque à côté d'une étiquette qui doit être positionnée de manière relative, puis d'utiliser des valeurs négatives pour la marge.

17. Lors de l'utilisation du positionnement absolu, la valeur de la marge peut être utilisée pour se positionner par rapport à sa propre position, ce qui est différent du positionnement des attributs tels que haut et gauche par rapport au bord de la fenêtre. . L’avantage du positionnement absolu est qu’il permet aux autres éléments d’ignorer son existence.

18. Si le texte est trop long, changez la partie longue en points de suspension et affichez-la : IE5, FF sont invalides, mais peuvent être masqués, IE6 est valide

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

19. Lorsqu'il peut y avoir des problèmes de duplication de texte causés par des commentaires dans IE, vous pouvez modifier les commentaires en :

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

20. Comment utiliser CSS pour appeler des polices externes Syntaxe :

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

Valeur :

nom : nom de la police. Toute valeur possible de l'attribut font-family
url(url) : Utiliser une adresse URL absolue ou relative pour spécifier le fichier de police OpenType
sRules : Définition de la feuille de style

21. Comment créer un formulaire Centrer le texte dans une zone de texte verticalement ? Si l'utilisation de la hauteur de ligne et du regroupement de hauteurs n'a aucun effet dans FF, la méthode consiste à définir le remplissage supérieur et inférieur pour obtenir l'effet souhaité.

22. Petits soucis à prendre en compte lors de la définition de la balise A : Quand on définit un{color:red;}, il représente les styles des quatre états de A. . Si A ce moment, pour définir un état dans lequel la souris est placée, définissez simplement a:hover. Les trois autres états sont les styles définis dans A.
Lorsqu'un seul a:link est défini, n'oubliez pas de définir les trois autres états !

23. Tous les styles n'ont pas besoin d'être abrégés : Lorsque la feuille de style est définie telle que p{padding:1px 2px 3px 4px}, elle sera ajoutée dans la suite. projet Le remplissage supérieur d'un style est de 5 pixels et le remplissage inférieur est de 6 pixels. Nous ne devons pas nécessairement écrire p.style1{padding:5px 6px 3px 4px}. Il peut être écrit sous la forme p.style1{padding-top:5px;padding-right:6px;} Vous pensez peut-être que l'écrire de cette façon n'est pas aussi bon que l'original, mais y avez-vous déjà pensé ? La méthode définit le style à plusieurs reprises. De plus, vous n'avez pas besoin de savoir quelles sont les valeurs de remplissage inférieures et gauches d'origine ! Si le style P précédent change à l'avenir, le style de p.style1 que vous avez défini changera également.

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）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); }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!