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

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

Artikel empfehlen

So laden Sie das JAR-Paket über die Webseite auf Nexus hoch

Wie lädt man das JAR-Paket in ein privates Lager ...

So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC

Problembeschreibung: Ich habe einen Mac gekauft u...

So schreiben Sie ein MySQL-Sicherungsskript

Vorwort: Die Bedeutung einer Datenbanksicherung l...

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

Inhaltsverzeichnis 1. So führen Sie stapelweise U...

Detaillierte Erklärung der Tomcat-Verzeichnisstruktur

Inhaltsverzeichnis Verzeichnisstruktur bin-Verzei...

Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben

Vor CSS3 konnten Verlaufsbilder nur als Hintergru...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

Eine Frage zum Verständnis mehrerer Parameter des Sortierbefehls in Linux

Der Sortierbefehl wird sehr häufig verwendet, ver...

Zusammenfassung des MySQL-Installationsdiagramms

Grafisches Tutorial zur Installation und Konfigur...

Linux Redis-Sentinel-Konfigurationsdetails

herunterladen Download-Adresse: https://redis.io/...

Details zur MySQL-Sicherheitsverwaltung

Inhaltsverzeichnis 1. Vorstellen gemäß der Bestel...