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
Wie lädt man das JAR-Paket in ein privates Lager ...
Problembeschreibung: Ich habe einen Mac gekauft u...
Gestern, als ich die Funktion zum Hochladen von B...
Vorwort: Die Bedeutung einer Datenbanksicherung l...
Inhaltsverzeichnis 1. Bootstrap-Rasterlayout 2. V...
Inhaltsverzeichnis 1. So führen Sie stapelweise U...
Inhaltsverzeichnis Verzeichnisstruktur bin-Verzei...
Vor CSS3 konnten Verlaufsbilder nur als Hintergru...
Docker ist eine Open-Source-Container-Engine, mit...
Der Sortierbefehl wird sehr häufig verwendet, ver...
Grafisches Tutorial zur Installation und Konfigur...
1. Fügen Sie das Plug-In hinzu und fügen Sie die ...
herunterladen Download-Adresse: https://redis.io/...
1. Einleitung Heute hat mich ein Kollege gefragt,...
Inhaltsverzeichnis 1. Vorstellen gemäß der Bestel...