Maison > Article > interface Web > Explication détaillée du symbole d'élément de liste personnalisé list-style-image
Explication détaillée du symbole d'élément de liste personnalisé list-style-image
- 云罗郡主avant
- 2018-11-12 16:19:444937parcourir
Cet article vous apporte une explication détaillée du symbole d'élément de liste personnalisé list-style-image. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. Attribut List-style-image
Qu'il s'agisse d'une liste ordonnée ou d'une liste non ordonnée, ils ont leurs propres symboles d'éléments de liste. Mais les symboles d’éléments de liste par défaut sont relativement laids. Donc, si nous voulons personnaliser les symboles d’éléments de liste, comment y parvenir ?
En CSS, nous pouvons utiliser l'attribut list-style-image pour personnaliser le symbole de l'élément de liste.
Syntaxe :
list-style-image:url(图像地址);
Explication :
L'adresse de l'image peut être une adresse relative ou une adresse absolue. [Lecture recommandée : Positionnement relatif et positionnement absolu en HTML]
Exemple :
Nous personnalisons la petite icône suivante comme symbole d'élément de liste :
Par exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>list-style-image属性</title>
<style type="text/css">
ul{list-style-image:url("https://img.php.cn/upload/9-3-1.png");}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>L'effet est le suivant :
Ce qui précède est la personnalisation Une introduction complète à l'explication détaillée du symbole d'élément de liste list-style-image Si vous souhaitez en savoir plus sur le Tutoriel HTML5, veuillez faire attention au site Web PHP chinois.
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!