Heim > Artikel > Web-Frontend > Wie erstelle ich eine ungeordnete Liste mit Bildsymbolen in HTML?
Wie erstelle ich eine ungeordnete Liste mit Bildsymbolen in HTML?
- WBOYnach vorne
- 2023-09-06 15:49:151591Durchsuche
Geordnete Listen sind nummeriert, ungeordnete Listen sind nicht nummeriert, sie können mithilfe von Tags erstellt werden
CD – Dadurch wird eine ungeordnete Liste erstellt, die mit Aufzählungszeichen markiert ist (Standard).
Kreise – Dadurch wird eine ungeordnete Liste mit der Bezeichnung Kreise erstellt.
Quadrat – Dadurch wird eine ungeordnete Liste mit der Bezeichnung „Quadrat“ erstellt.
-
Keine – Dadurch wird eine ungeordnete Liste ohne Tags erstellt.
Grammatik
Hier ist die Syntax zum Erstellen einer ungeordneten Liste mit quadratischen Aufzählungszeichen in HTML.
<ul style="list-style-image: url(image.png)"> <li>Item in list…</li> <li>Item in list…</li> <li>Item in list…</li> </ul>
Beispiel 1
Im Folgenden finden Sie ein Beispiel für die Erstellung einer ungeordneten Liste mit Bildaufzählungszeichen in HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul style="list-style-image: url(images/11.png)">
<li>Abdul</li>
<li>Jason</li>
<li>Yadav</li>
</ul>
</body>
</html>
Das Folgende ist die Ausgabe des obigen Beispielprogramms.
Beispiel 2
Sehen wir uns ein weiteres Beispiel für die Erstellung einer ungeordneten Liste mithilfe von Bildaufzählungszeichen an -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>Tutorials</h2>
<p>The list of tutorials:</p>
<ul style="list-style-image: url('/theme/css/icons/image-editor.png');">
<li>Java</li>
<li>C++</li>
<li>Ruby</li>
</ul>
</body>
</html>
Nachdem der obige Code ausgeführt wurde, lautet die Ausgabe wie folgt: -
Das obige ist der detaillierte Inhalt vonWie erstelle ich eine ungeordnete Liste mit Bildsymbolen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!