Les experts partagent 25 conseils pratiques pour la mise en page Web CSS

Cet article vous apporte des conseils pratiques sur la mise en page des pages Web CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. La balise ul a une valeur de remplissage par défaut dans Mozilla, 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 le même attribut d'étiquette soit affiché comme A dans IE, mais il doit être affiché dans Mozilla . Il doit être réglé sur B pour 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 de langue, il doit être écrit comme ceci : <p>Ce qui suit est un fragment de citation : <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">&lt;script type=”text/javascript”&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>14. Le titre est le titre, le texte du titre est le texte du titre. Parfois, le titre n'a pas nécessairement besoin d'afficher du texte, ce qui suit est donc un fragment de citation : <p></p><h1>title content</h1> a été remplacé par<h1><span>title content</span> &lt ;/h1><p></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) Ce qui suit est un fragment cité : <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">table{border-collapse:collapse;} td{border:#000 solid 1px;}</pre><div class="contentsignin">Copier après la connexion</div></div>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 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. <p></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></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></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">&lt;DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”&gt;</pre><div class="contentsignin">Copier après la connexion</div></div>&lt ;NOBR> Par exemple, une ligne de texte est trop longue pour tenir sur une seule ligne du tableau. </NOBR><p></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></p><!–[if !IE]> Mettez votre commentaire ici…<![endif]–><p></p>20. Comment utiliser CSS pour appeler des polices externes<p></p>Syntaxe :<p></p>@font-face{ font-family :name;src:url(url);sRules} Valeur : <p></p>name : nom de la police. Toute valeur possible de l'attribut font-family <p></p>url (url) : Spécifiez le fichier de police OpenType à l'aide d'une adresse url absolue ou relative <p></p>sRules : Définition de la feuille de style <p></p> 21 . Comment centrer le texte verticalement dans une zone de texte dans un formulaire ? <p></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></p>22. Petits problèmes à prendre en compte lors de la définition de la balise A : <p></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></p>Lorsqu'un seul a:link est défini, n'oubliez pas de définir les trois autres états ! <p></p>23. Tous les styles n'ont pas besoin d'être abrégés : <p></p>Lorsque p{padding:1px 2px 3px 4px} est défini avant la feuille de style, <p></p> sera utilisé dans les versions suivantes. projets Ajout d'un style avec un remplissage supérieur de 5 px et un remplissage inférieur de 6 px. <p></p>Nous ne devons pas nécessairement écrire p.style1{padding:5px 6px 3px 4px}. <p></p> peut être écrit comme p.style1{padding-top:5px;padding-right:6px;},<p></p>Vous pensez peut-être qu'écrire de cette façon n'est pas aussi bon que l'original, mais y avez-vous déjà pensé ? , <p></p> Votre façon d'écrire définit le style à plusieurs reprises, et vous n'avez pas besoin de retrouver les valeurs originales du remplissage inférieur et du remplissage gauche ! <p><p>如果以后前一个样式P变了话，你定义的p.style1的样式也要变。</p><p>24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。</p><p>25、几个常用到的CSS样式：</p><p>1）中文字两端对齐：text-align:justify;text-justify:inter-ideograph;</p><p>2）固定宽度汉字截断：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;（不过只能处理文字在一行上的截断，不能处理多行。）（IE5以上）FF不能，它只隐藏。</p><p>3）固定宽度汉字（词）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。</p><p>4）<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。</p><p>5）图片设为半透明：。halfalpha { background-color:#000000;filter:Alpha（Opacity=50）}在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；</p><p>6）FLASH透明：选中swf,打开原代码窗口，在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。</p><p>针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”</p><p>7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.pictures img { filter: alpha（opacity=45）； } .pictures a:hover img { filter: alpha（opacity=90）； }</pre><div class="contentsignin">Copier après la connexion</div></div><p>以上就是对CSS网页布局实用小技巧的全部介绍，如果您想了解更多有关<a href="http://www.php.cn/course/list/14.html" target="_self">CSS3教程，请关注PHP中文网。<p><br/><p> </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!