CSS legt den Listenstil fest und erstellt den Implementierungscode für das Navigationsmenü

1. Setzen Sie das Listensymbol

list-style-type: Attribut; //Listenstil festlegen

Listenstiltyp: keiner; //Stil löschen

Es gibt viele Eigenschaften, die Sie selbst ausprobieren können: Kreis, Scheibe, Dezimalzahl. . . .

2. Listenbildsymbole festlegen

Bildsymbol für ul,ol festlegen

ul,ol{
     Listenstil-Bild: URL("li.png")
 }

Code:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Listensymbole festlegen</title>
<style type="text/css">
ul,ol{
 Listenstil-Bild: URL("li.png")
}
</Stil>
</Kopf>
<Text>
<ul>
 <li>Startseite</li>
 <li>Mein Blog</li>
 <li style="list-style-image: url('image.png')">Mein Fotoalbum</li>
 <li>Hinterlassen Sie eine Nachricht</li>
 <li>Über mich</li>
</ul>
<ol>
 <li>Startseite</li>
 <li>Mein Blog</li>
 <li>Mein Fotoalbum</li>
 <li>Hinterlassen Sie eine Nachricht</li>
 <li>Über mich</li>
</ol>
</body>
</html>

Anzeigeeffekt:

3. Erstellen Sie ein einfaches Navigationsmenü

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Erstellen eines einfachen Navigationsmenüs</title>
<style type="text/css">
#Navigation{
/* Breite: 120px; */
 
 Schriftfamilie: Arial;
 Schriftgröße: 14px;
 Textausrichtung: zentriert;
}
#navigation ul{
 Listenstiltyp: keiner;
 Rand: 0px;
 Polsterung: 0px;
}
#navigation li{
 border-bottom:1px solid #9F9FED; /* Unterstreichung hinzufügen */ 
 float: left; /* horizontale Anordnung */
} 
#navigation li a{
 Anzeige: Block;
 Höhe: 1em;
 Polsterung: 5px 5px 5px 0,5em;
 Textdekoration: keine;
}
#navigation li a:link,#navigation li a:besucht{
 Hintergrundfarbe: #1136c1;
 Farbe: #FFF;
}
#navigation li a:hover{ /* Wenn die Maus vorbeigeht*/
 Hintergrundfarbe: #002099; /* Hintergrund ändern */
 Farbe: #ff0; /* Textfarbe ändern */
}
</Stil>
</Kopf>
<Text>
<div id="navigation">
 <ul>
  <li><a href="#">Startseite</a></li>
  <li><a href="#">Mein Blog</a></li>
  <li><a href="#">Mein Fotoalbum</a></li>
  <li><a href="#">Hinterlassen Sie eine Nachricht</a></li>
  <li><a href="#">Über mich</a></li>
 </ul>
</div>
</body>
</html>

Zusammenfassen

Oben sehen Sie den Implementierungscode für die CSS-Listenstileinstellung und die Erstellung des Navigationsmenüs, der vom Editor eingeführt wurde. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: W3C Tutorial (4): W3C XHTML Aktivitäten

>>: Eine detaillierte Diskussion der Komponenten in Vue