Ausführliche Erläuterung des benutzerdefinierten Listenelementsymbols list-style-image-HTML-Tutorial-php.cn

Ausführliche Erläuterung des benutzerdefinierten Listenelementsymbols list-style-image

云罗郡主

Freigeben： 2018-11-12 16:19:44

nach vorne

4963 Leute haben es durchsucht

Dieser Artikel enthält eine detaillierte Erklärung des benutzerdefinierten Listenelementsymbols list-style-image. Ich hoffe, dass er für Freunde in Not hilfreich ist.

1. List-style-image-Attribut

Ob es sich um eine geordnete Liste oder eine ungeordnete Liste handelt, sie haben ihre eigenen Listenelementsymbole. Aber die Standardsymbole für Listenelemente sind relativ hässlich. Wenn wir also die Symbole für Listenelemente anpassen möchten, wie erreichen wir das?

In CSS können wir das list-style-image-Attribut verwenden, um das Listenelementsymbol anzupassen.

Syntax:

list-style-image:url(图像地址);

Nach dem Login kopieren

Erklärung:

Die Bildadresse kann eine relative Adresse oder eine absolute Adresse sein. [Empfohlene Lektüre: Relative Positionierung und absolute Positionierung in HTML]

Beispiel:

Wir passen das folgende kleine Symbol als Listenelementsymbol an:

Ausführliche Erläuterung des benutzerdefinierten Listenelementsymbols list-style-image

Zum Beispiel:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Ausführliche Erläuterung des benutzerdefinierten Listenelementsymbols list-style-image

Das Obige ist das Benutzerdefiniertes Listenelement Eine vollständige Einführung in die detaillierte Erklärung des Symbols list-style-image Wenn Sie mehr über das Html5-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des benutzerdefinierten Listenelementsymbols list-style-image. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!