conseils de mise en page Web CSS

Conseils pour la mise en page des pages Web frontales :

(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)

1. La balise ul dans Mozilla a une valeur de remplissage par défaut, mais 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 class et id en même temps pour la définition CSS d'une balise. La définition du sélecteur 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 : il est normal que l'attribut du même label s'affiche dans IE lorsqu'il est défini sur A , et dans Mozilla, il doit être défini sur B pour s'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 père-fils. Ce sont toutes des relations d'héritage.

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 plus tard.

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 d'arrière-plan plus foncée pour votre étiquette à ce stade.

9. Lors de la définition des quatre états d'un lien, faites attention à l'ordre :

Link Visited Hover Active

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

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

12. Le tableau fonctionne bien mieux que les autres balises à certains égards. Veuillez l'utiliser là où l'alignement des colonnes est requis.

13. 3f1c4e4b6b16bbbd69b2ee476dc4f83a Il n'y a pas d'attribut de langue

doit être écrit comme ceci :

<script type=”text/JavaScript”>

14. title est le texte du titre.

Parfois, le titre n'a pas nécessairement besoin d'afficher du texte, donc :4a249f0d628e2318394fd9b75b4636b1Contenu du titre473f0a7621bec819994bb5020d29372a est remplacé par4a249f0d628e2318394fd9b75b4636b145a2772a6b6107b401db3c9b82c049c2Contenu 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 Si la marge a une valeur négative, vous pouvez utiliser l'absolu. dans l'étiquette Il joue le rôle de positionnement relatif lors du positionnement 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 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. Dans IE Si le problème de duplication de texte peut être causé par des commentaires, 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 :

name : 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 le texte dans un formulaire Le texte dans la zone est-il centré 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 problèmes à prendre en compte lors de la définition de la balise A :

Quand on définit un{color:red;}, il représente les quatre états de A. Si vous souhaitez To définissez un état de survol de la souris, 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}, un autre style est ajouté dans le projet suivant. le remplissage 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. Plus le site Web est grand, plus il y a de styles CSS. Avant de commencer, veuillez effectuer des préparatifs et des plans complets, y compris les règles de dénomination. Division des blocs de pages, classification des styles internes, etc.

25. Plusieurs styles CSS couramment utilisés :

1) Alignement des caractères chinois :

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

2) Troncature des caractères chinois à largeur fixe :

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

( Cependant, il ne peut gérer la troncature de texte que sur une seule ligne, pas sur plusieurs lignes.) (IE5 et versions ultérieures) FF ne le peut pas, il ne fait que se cacher.

3) Retour à la ligne de caractères chinois (mots) à largeur fixe :

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

(IE5 et supérieur) FF ne peut pas.

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教程

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!