<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> ;
ul{
/*Petits points par défaut*/
list-style-type : disque ;
/*Petits points creux*/
list-style-type : cercle;
/*Petits carrés pleins*/
list -style -type: square;
/*Le numéro de série numérique devient une liste ordonnée*/
list-style-type: decimal;
/*Ajoutez 0 devant le numéro de série : Exemple : 01, 02, 03*/
list- style -type: decimal-leading-zero;
/*Utilisez une image pour remplacer l'origine. La taille doit être très petite et difficile à utiliser. Au lieu de cela, contrôlez directement la balise li*/
/*list-style-image : url(1.jpg); */
}
/*Éléments de liste personnalisés*/
li{
/*Annuler les points*/
list-style-type : aucun;
/*Réserver la position de l'image*/
pad ding- gauche : 2em ;
/*Télécharger des images*/
list-style-image : url(1.jpg);
/*Les éléments de la liste d'images ne sont pas répétés*/
background-repeat : no-repeat;
/*Image size*/
background- size : 1em 1em;
/*Définissez la position de l'image, alignez-la avec la grille supérieure du texte et inspectez visuellement l'axe xy*/
background-position : 0 4px;
}
</style> ;
</head>
<body>
<h3>Outils de développement front-end</h3>
<ul>
<li>HTML</li>
<li>CSS</li> ;
<li>javaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</body>
</html>
L'image référencée par l'élément de la liste de résultats affiché est toujours la même. L'affichage est très grand mais pas réduit à 1em. Pourquoi ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il est recommandé d'utiliser les deux méthodes suivantes pour résoudre le problème : 1. Modifiez la taille de votre image source. 2. Utilisez li:avant de configurer
li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }