Maison > interface Web > tutoriel CSS > Quel est le style de liste en CSS

Quel est le style de liste en CSS

coldplay.xixi
Libérer: 2023-01-03 09:30:51
original
3398 Les gens l'ont consulté

Les styles de liste en CSS sont : 1. liste ordonnée CSS [ol] et liste non ordonnée CSS [ul] 2. style d'étiquette de liste CSS [list-style-type] ; [liste-style-position].

Quel est le style de liste en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Le style de liste en CSS est :

1. Liste ordonnée CSS (ol) et liste non ordonnée CSS (ul)

<.>

  list.html
 
  <!doctypehtml><html><head>
 
  <metacharset="utf-8">
 
  <title>列表样式</title>
 
  <linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
 
  <p>
 
  <ul>
 
  <li>水果<ol>
 
  <li>苹果</li>
 
  <li>香蕉</li>
 
  <li>梨子</li>
 
  </ol>
 
  </li>
 
  </ul>
 
  </p></body></html>
Copier après la connexion

2. style d'étiquette de liste CSS list-style-type

Valeur de l'attribut :

  • cercle ; cercle ouvert

  • cercle rempli

  • nombre décimal

  list.css
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }
Copier après la connexion

3. Méthode d'affichage du style d'étiquette CSS liste-style-position

Valeur de l'attribut : outside (à l'extérieur du texte, par défaut)

inside (avec le texte)

  list.css
 
  ul{
 
  text-align:center;
 
  list-style-position:outside;
 
  }
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }
Copier après la connexion

Tutoriel associé recommandations : 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal