Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).
Ⅰ. Problembeschreibung: Verwenden Sie HTML+CSS, um eine einfache Navigationsleiste zu implementieren; ⅡDer Implementierungsprozess läuft wie folgt ab: 1. Führen Sie die Software VScode aus. Sie können dies durch einen persönlichen Test realisieren.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
/*
Die obige Anweisung bedeutet: Löschen Sie die äußeren und inneren Ränder der Div-Box, um zu verhindern, dass das System die Standardwerte verwendet.
Das Vorhandensein oder Fehlen dieser Anweisung hat keinen großen Einfluss auf das Ergebnis.
*/
ul {
Listenstil: keiner;
}
/*
Die obige Anweisung bedeutet: Den Standardstil der UL-Liste abbrechen;
Ohne diese Anweisung werden die Ergebnisse höchstwahrscheinlich kleine schwarze Punkte in der Navigationsleiste aufweisen.
*/
.Kasten {
Breite: 960px;
Höhe: 40px;
Rand: 100px automatisch;
}
/*
Die obige Anweisung bedeutet: Definieren Sie die Breite der Div-Box auf 960 Pixel.
Die Höhe beträgt 40px;
Zentriert auf dem Bildschirm mit einem Rand von 100 Pixeln;
*/
.box ul {
Überlauf: versteckt;
}
/*
Die obige Anweisung bedeutet: Setzen Sie das versteckte Attribut für die UL-Box unter der Div-Box.
Das Attribut hidden dient dazu, die eventuellen Floats der Childboxen zu löschen, um die Navigationsleiste je nach Bedarf 8-teilig aufstellen zu können.
*/
.box ul li {
Breite: 120px;
Höhe: 40px;
schweben: links;
Schriftgröße: 18px;
Textausrichtung: zentriert;
Schriftfamilie: „Microsoft Yahei“;
Zeilenhöhe: 40px;
}
/*
Die obige Anweisung bedeutet: Setzen Sie den Attributwert der untergeordneten Box li der ul-Box der Div-Box.
Die Breite beträgt 120px;
Die Höhe beträgt 40px;
Der Gleitwert schwebt nach links;
Die Untergröße beträgt 18px;
Die Textausrichtung ist zentriert;
Der Texttyp ist „Microsoft YaHei“
Die Zeilenhöhe beträgt 40px;
*/
.box ul li a {
Anzeige: Block;
Hintergrundfarbe: #ccc;
Farbe: #666;
Textdekoration: keine;
}
/*
Die obige Anweisung bedeutet: Setzen Sie den Attributwert der untergeordneten Box li der ul-Box der Div-Box.
" display: block;": wandelt Inline-Elemente in Elemente auf Blockebene um;
Stellen Sie die Hintergrundfarbe auf „#ccc“ ein.
Die Schriftfarbe ist „#666“;
Es gibt keine Textdekoration;
*/
.box ul li a:hover {
Hintergrundfarbe: gelbgrün;
Farbe: #fff;
Schriftstärke: fett;
}
/*
Die obige Anweisung bedeutet: Legen Sie den Attributwert des untergeordneten Felds li des ul-Felds des Div-Felds fest. (Legen Sie den Wert für die Änderung der Hintergrundfarbe fest, wenn die Maus auf die Navigationsleiste bewegt wird.)
Die Hintergrundfarbe nach der Änderung ist „yellowgreen“ [gelbgrün];
Die geänderte Schriftfarbe ist „#fff“ [weiß];
Die Schriftstärke ist nach der Änderung „fett“ [bold];
*/
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
<li><a href="#">Startseite</a></li>
</ul>
</div>
</body>
</html> 3. Ergebnisanzeige:
Wenn die Maus hinter dem ersten „Home“ in der Navigationsleiste platziert wird:
Dies ist das Ende dieses Artikels über die Verwendung von HTML+Css zur Implementierung einer einfachen Navigationsleistenfunktion (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus berührt wird). Weitere verwandte Inhalte zur HTML-Navigationsleiste finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
>>: Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify
Artikel empfehlen
Detailliertes Installationstutorial zur dekomprimierten Version von mysql5.7.19 (mit rein geknackter chinesischer Version von SQLYog)
Die Version Mysql5.7.19 ist eine neue Version, di...
Detaillierte Erläuterung der Konvertierung von JavaScript-Objekten in primitive Werte
Inhaltsverzeichnis Objekt.prototype.valueOf() Obj...
So ändern Sie die Zeitzone und die Uhrzeit im Ubuntu-System
Auf einem Linux-Computer gibt es zwei Zeitzonen: ...
Implementierungsprozess des Lupeneffekts im Javascript-Beispielprojekt
Inhaltsverzeichnis Vorwort Fall: Nachahmung des L...
Eine kurze Einführung in die Unterschiede zwischen HTML und XHTML sowie HTML4- und HTML5-Tags
Unterschied zwischen HTML und XHTML 1. XHTML-Elem...
Detaillierte Erklärung des MySQL-Sicherungsprozesses mit Xtrabackup
Inhaltsverzeichnis 01 Hintergrund 02 Einleitung 0...
Detaillierte Erläuterung des Beispielcodes für die Verbesserungen und Änderungen, die CSS-Variablen bei der Entwicklung interaktiver JS-Komponenten mit sich bringen
1. Qualitative Änderungen durch CSS-Variablen Die...
Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)
x-ua-compatible wird verwendet, um das Modell für...
Verwendung von Kubernetes YAML-Dateien
Inhaltsverzeichnis 01 Einführung in YAML-Dateien ...
Semantik, Schreiben und bewährte Methoden für Link A
Die Semantik, der Schreibstil und die Best Practi...
Eine kurze Diskussion über die Simulation von Multithread- und Multiprozess-Abstürzen in Linux
Abschluss: Wenn in einer Multithread-Umgebung ein...
Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes
In diesem Artikel finden Sie den spezifischen Cod...
Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18
In Bezug auf die Verbindungsmethode zwischen Java...
Zusammenfassung der Standardverwendung von HTML-, CSS- und JS-Kommentaren
Das Hinzufügen der erforderlichen Kommentare ist ...
jQuery-Plugin zur Implementierung eines gestapelten Menüs
Jeden Tag ein jQuery-Plugin - gestapeltes Menü. Z...