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

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

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:

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

Detaillierte Erklärung des Sticky Position-Attributs in CSS

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Natives JS zur Implementierung der Drag-Position-Vorschau

MySQL 5.5.56 - Installationsfreie Versionskonfigurationsmethode

Detailliertes Beispiel für JavaScript-Array-Methoden

Vue Uniapp realisiert den Segmentierungseffekt

Detaillierte Erläuterung häufig verwendeter Nginx-Umschreibregeln

Hinweise zum MySQL-Datenbank-Sicherungsprozess

Artikel empfehlen

So führen Sie PostgreSQL mit Docker aus

Website-Leistung: Bild- und Cookie-Optimierung und Optimierung mobiler Anwendungen

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Beispiel für eine automatische Importmethode für allgemeine Vue3.0-Komponenten

Tutorial zur kostenlosen Konfiguration der MySQL 5.7.18-Installationsversion

Eine kurze Analyse des Unterschieds zwischen FIND_IN_SET() und IN in MySQL

Detailliertes Tutorial zur Installation von Docker auf CentOS 8

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 winx64

Detaillierte Analyse der MySQL-Indizes

Aktivieren Sie den SSHD-Vorgang im Docker

Fassen Sie die allgemeinen Eigenschaften von BigIn-Funktionen in JavaScript zusammen

Lernen Sie die Ausführungsreihenfolge von SQL-Abfragen von Grund auf

Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3

JavaScript zum Erzielen eines einfachen Drag-Effekts

Detaillierte Erläuterung der Konfigurationsmethode der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation