Explication détaillée du symbole d'élément de liste personnalisé list-style-image-tutoriel HTML-php.cn

Explication détaillée du symbole d'élément de liste personnalisé list-style-image

云罗郡主

Libérer： 2018-11-12 16:19:44

avant

4997 Les gens l'ont consulté

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(图像地址);

Copier après la connexion

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 :

Explication détaillée du symbole délément de liste personnalisé list-style-image

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>

Copier après la connexion

L'effet est le suivant :

Explication détaillée du symbole délément de liste personnalisé list-style-image

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!