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;
**Anforderung: **Teilen Sie die Navigationsleiste in acht kleine Teile auf. Wenn Sie die Maus darauf bewegen, aber nicht klicken, wird die Hintergrundfarbe der Navigationsleiste als Gelbgrün angezeigt.

Ⅱ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.
2. Führen Sie den Code aus:

<!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:
Vor dem Loslassen der Maus:

Bildbeschreibung hier einfügen

Wenn die Maus hinter dem ersten „Home“ in der Navigationsleiste platziert wird:

Bildbeschreibung hier einfügen

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!

<<: Lösen Sie das Problem, dass Sie auf dem Linux-Server nicht auf die RabbitMQ-Verwaltungsseite zugreifen können

>>: Detaillierte Erklärung der Verwendung von JSON.parse und JSON.stringify

Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).

Ⅰ. Problembeschreibung:

ⅡDer Implementierungsprozess läuft wie folgt ab:

isPrototypeOf-Funktion in JavaScript

Lösungen für das Problem der Tabellenschachtelung und Rahmenzusammenführung

Detaillierte Erläuterung der Routing-Konfiguration im Linux-System mit mehreren Netzwerkkarten

Drei Vererbungsmethoden in JavaScript

JS implementiert Karussell mit mehreren Tabs

Warum ist es langsam, wenn Limit- und Offset-Paging-Szenarien verwendet werden?

Die Vollversion des gängigen Linux-Tools vi/vim

So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

JavaScript imitiert den vollständigen Seitenimplementierungsprozess der offiziellen Website von Xiaomi Mall

Artikel empfehlen

W3C Tutorial (6): W3C CSS Aktivitäten

Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

Schnelle Lösung zum Vergessen des MySQL8-Passworts

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

Implementierung eines schwebenden Werbestreifens in HTML und CSS

Tkinter verwendet JS-Canvas, um Farbverlaufsfarben zu erzielen

Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System

Detaillierte Schritte zum Bereitstellen von Microsoft SQL Server mit Docker

ElementUI-Komponente el-dropdown (Falle)

Detaillierte Erklärung gängiger Docker Compose-Befehle

So aktualisieren Sie v-for in Vue

So verwenden Sie die HTML-Formularattribute „schreibgeschützt“ und „deaktiviert“

Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import

Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann

So erstellen Sie ein React-Projekt mit Vite