Wie erstelle ich eine ungeordnete Liste mit Bildsymbolen in HTML?-HTML-Tutorial-php.cn

Wie erstelle ich eine ungeordnete Liste mit Bildsymbolen in HTML?

WBOY

Freigeben： 2023-09-06 15:49:15

nach vorne

1641 Leute haben es durchsucht

Geordnete Listen sind nummeriert, ungeordnete Listen sind nicht nummeriert, sie können mithilfe von Tags erstellt werden

und Tags

werden verwendet, um die Elemente der Liste zu definieren. Wir können 4 Arten ungeordneter Listen in HTML erstellen -

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!