Résumé des conseils de mise en page des pages Web CSS

Cet article vous propose un résumé des conseils de mise en page Web CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

1 La balise ul a une valeur de remplissage par défaut dans Mozilla, mais uniquement une marge dans IE. est la 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 manière 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 : sélecteur {nom de l'attribut : B !important ; nom de l'attribut : A🎜>

4 S'il y a un espacement entre un groupe de balises à imbriquer, laissez l'attribut margin. de l'étiquette située à l'intérieur au lieu de définir le remplissage

de l'étiquette située à l'extérieur 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. Faites attention à l'ordre lors de la définition des quatre états du lien : Lien visité Survol actif

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

.

11. Vous pouvez définir des couleurs Abréviation #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. <script> n'a pas l'attribut langage. Il doit être écrit comme ceci : <script type="text/JavaScript"><p>14. 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 : <h1>Contenu du titre est remplacé par <h1><span>Contenu du titre<p> 15. Tableau de contour parfait à un seul pixel (peut réussir le test dans IE5, IE6, IE7 et FF1.0.4 ou supérieur) <p><pre class="brush:css;toolbar:false">Example Source Code</pre>Le code est le suivant : <p><pre class="brush:css;toolbar:false">table{border-collapse:collapse;} td{border:#000 solid 1px;}</pre> 16. Les valeurs de marge négatives peuvent jouer un rôle dans le positionnement relatif lorsque l'étiquette utilise un positionnement absolu. Lorsque la page est centrée, 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. <p>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. <p>18. Si le texte est trop long, changez la partie longue en points de suspension et affichez-la : IE5, FF ne sont pas valides, mais peuvent être masqués, IE6 est valide <p><pre class="brush:css;toolbar:false">&lt;p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt;</pre>&lt ;NOBR> Par exemple, une ligne de texte est trop longue pour tenir sur une seule ligne du tableau. <p>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 : <p>Exemple de code source<p>Le code est la suivante : <p><pre class="brush:css;toolbar:false">&lt;!–[if !IE]&gt;Put your commentary in here…&lt;![endif]–&gt;</pre>20. Comment utiliser CSS pour appeler des polices externes <p> Syntaxe : <p><pre class="brush:css;toolbar:false">@font-face{font-family:name;src:url（url）；sRules}</pre>Valeur : <p>nom : nom de la police. Toute valeur possible de l'attribut font-family <p>url (url) : Spécifiez le fichier de police OpenType à l'aide d'une adresse url absolue ou relative <p>sRules : Définition de la feuille de style <p> 21 . Comment centrer le texte verticalement dans une zone de texte dans un formulaire ? <p>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é. <p>22. Petits problèmes à prendre en compte lors de la définition de la balise A : <p>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. <p>Lorsqu'un seul a:link est défini, n'oubliez pas de définir les trois autres états ! <p>23. Tous les styles n'ont pas besoin d'être abrégés : <p><p>当样式表前定义了如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的样式也要变。<p>24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。<p>25、几个常用到的CSS样式：<p>1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;<p>2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。<p>3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。<p>4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。<p>5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；<p>6）Flash透明：选中swf,打开原代码窗口，在前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。<p>针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”<p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：<pre class="brush:css;toolbar:false">.pictures img { filter: alpha（opacity=45）； } .pictures a:hover img { filter: alpha（opacity=90）； }</pre><p>以上就是对CSS网页布局小技巧汇总的全部介绍，如果您想了解更多有关<a href="http://www.php.cn/course/list/14.html" target="_self">CSS3教程，请关注PHP中文网。<p><br/></script>

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!