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
Detaillierte Erläuterung der TCPdump-Befehlsbeispiele in Linux
Vorwort Einfach ausgedrückt ist tcpdump ein Paket...
Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen
1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...
So definieren Sie Datenbeispiele in Vue
Vorwort Im Entwicklungsprozess ist das Definieren...
mysql installer web community 5.7.21.0.msi grafik-tutorial zur installation
In diesem Artikelbeispiel wird der spezifische Co...
CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt
So ändern Sie den Bild-Hyperlink, wenn Sie mit der...
Details zum Like-Operator in MySQL
1. Einleitung Beim Filtern unbekannter oder teilw...
Detaillierte Erklärung zur Verwendung von Docker durch Deepin zur Installation einer MySQL-Datenbank
Fragen Sie zuerst die MySQL-Quelle ab Docker-Such...
Linux verwendet den Befehl scp, um Dateien auf den lokalen Computer zu kopieren und lokale Dateien auf den Remote-Server zu kopieren
Wie unten dargestellt: Kopieren Sie die Dateien d...
Implementierung der CentOS8.0-Netzwerkkonfiguration
1. Unterschiede in der Netzwerkkonfiguration zwis...
So zeigen Sie den Status von Remote-Serverdateien in Linux an
Wie unten dargestellt: Der Testbefehl stellt fest...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
Eine detaillierte Erklärung der DIV+CSS-Benennungsregeln kann zur SEO-Optimierung beitragen
1. Benennungskonventionen für CSS-Dateien Vorschl...
Detaillierte Erklärung zur Verwendung der Vue-Komponente zur Kennzeichensuche
Eine einfache Nummernschild-Eingabekomponente (vu...
Drei Scrolling-Effekte für die Benachrichtigungsleiste, implementiert mit reinem CSS
Vorwort Die Benachrichtigungsleistenkomponente is...
So stellen Sie versehentlich gelöschte Tabellendaten in MySQL wieder her (unbedingt lesen)
Wenn ein Backup vorhanden ist, ist es ganz einfac...