Analyse du CSS contrôlant les styles de ul et li (code)

Le contenu de cet article concerne l'analyse (code) du contrôle CSS des styles ul et li. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le code est le suivant :

<div id="menu"> 
<ul> 
<li><a href="#">首页</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">博客</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">设计</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">相册</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">论坛</a></li> 
<li class="menuDiv"></li> 
<li><a href="#">关于</a></li> 
</ul> 
</div>

CSS :

Le code est le suivant :

#menu ul {list-style:none;margin:0px;} 
#menu ul li {float:left;}

Explication :

#menu ul {list-style:none;margin:0px;}

list-style:none, cette phrase consiste à annuler les points avant la liste, car nous n'avons pas besoin de ces points.
margin:0px, cette phrase consiste à supprimer l'indentation de UL. Cela peut rendre tout le contenu de la liste sans indentation.

#menu ul li {float:left;}

La gauche et la droite de float:left ici doivent afficher le contenu sur la même ligne, donc l'attribut float (float) est utilisé.

Explication détaillée des styles ul et li en CSS

Les listes ul et li sont des éléments couramment utilisés lors de l'utilisation de CSS pour mettre en page des pages. En CSS, certains attributs contrôlent spécifiquement les performances de la liste. Les attributs couramment utilisés incluent les attributs de type de style de liste, les attributs d'image de style de liste, les attributs de position de style de liste et les attributs de style de liste.

1. Attribut List-style-type

L'attribut list-style-type est utilisé pour définir la puce de la liste li, c'est-à-dire la modification dans devant la liste. L'attribut list-style-type est un attribut héritable. Sa structure grammaticale est la suivante : (Énumérez quelques valeurs d'attribut couramment utilisées)

list-style-type:none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

Il existe de nombreuses valeurs d'attribut​​pour l'attribut list-style-type. Nous n'en énumérons ici que quelques-unes. ceux les plus couramment utilisés.

aucun : n'utilisez pas de puces. disque : cercle plein. cercle : cercle creux. carré : carré plein. démique : chiffres arabes. alphabétique inférieur : lettres anglaises minuscules. alphabétique supérieur : lettres anglaises majuscules. inférieur-romain : chiffres romains minuscules. supérieur-romain : chiffres romains majuscules.

L'exemple de code pour utiliser l'attribut list-style-type est le suivant :

li{list-style-type:square;}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

2. attribut list-style-image

L'attribut list-style-image est utilisé pour définir l'utilisation d'images au lieu de puces. C'est également un attribut héritable, et sa structure syntaxique est la suivante :

list-style-image:none/url

l'attribut list-style-image peut prendre deux valeurs :

aucun : aucune image remplacée. url : Le chemin de l’image à remplacer.

Regardez un morceau de code :

li{list-style-image:url(images/bg03.gif);}

<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

3. attribut list-style-position

list- style- L'attribut position est un attribut utilisé pour définir la position d'affichage des puces dans la liste. C'est également un attribut héritable, et la structure syntaxique est la suivante :

list-style-position:inside/outside

inside : La puce est placée à l'intérieur du texte. outside : les puces sont placées à l’extérieur du texte.

Un exemple d'utilisation de l'attribut list-style-position est le suivant :

li{
list-style-type:square;
list-style-position:outside;}

<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

Regardons le style avec la valeur de l'attribut à l'intérieur.

li{
list-style-type:square;
list-style-position:inside;}

<ul>
<li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>

4. Attribut de style de liste

L'attribut de style de liste est un attribut qui définit de manière exhaustive le style li. attribut. Syntaxe La structure est la suivante :

li-style:list-style-type/list-style-image/list-style-position

Les positions de chaque valeur peuvent être échangées. Par exemple :

li{
list-style:url(images/bg03.gif) inside;}

<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>

[Recommandations associées : Tutoriel vidéo 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!