Implementierung der Navigationsleiste und des Dropdown-Menüs in CSS

Implementierung der Navigationsleiste und des Dropdown-Menüs in CSS

1. CSS-Navigationsleiste

(1) Funktion der Navigationsleiste

Der geübte Umgang mit der Navigationsleiste ist für das Website-Layout sehr wichtig. Mit CSS können Sie sie in eine ansprechende Navigationsleiste statt eines langweiligen HTML-Menüs umwandeln.

(2) Vertikale Navigationsleiste

<1>Der Code lautet wie folgt

<!doctype html>
<html>
    <Kopf> 
        <meta charset="utf-8"> 
        <title>Vertikale Navigationsleiste</title> 
        <link rel="stylesheet" href="daohanglan1.css"/>
    </Kopf>
    <Text>
        <ul>
            <li><a class="active" href="#home">Startseite</a></li>
            <li><a href="#news">Neuigkeiten</a></li>
            <li><a href="#contact">Kontakt</a></li>
            <li><a href="#about">Über</a></li>
        </ul>
        <div>
          <h2>Vertikale Navigationsleiste</h2>
          <h3>Vertikale Navigationsleiste vertikale Navigationsleiste vertikale Navigationsleiste vertikale Navigationsleiste vertikale Navigationsleiste vertikale Navigationsleiste vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
          <p>Vertikale Navigationsleiste</p>
        </div>
    </body>
</html>
Körper{
    Rand: 0;
}
ul{
    Polsterung: 0;
    Rand: 0;
    Listenstiltyp: keiner;
    
    Breite: 25 %;
    Hintergrundfarbe: #f1f1f1;
    
    Position: fest;
    Höhe: 100 %;
    oben: 0;
    Überlauf: automatisch;
    
    /* Rahmen: 1px durchgezogen #000; */
}
/* ul>li:nicht(:letztes-Kind){
    Rahmen unten: 1px durchgezogen #000;
} */
ul ein{
    Anzeige:Block;
    
    Textdekoration: keine;
    Farbe: #000;
    Polsterung: 8px 16px;
    
    Textausrichtung: zentriert;
}
li a:hover:nicht(.aktiv){
    Hintergrundfarbe: #555;
    Farbe: weiß;    
}
a.aktiv{
    Hintergrundfarbe: #4caf50;
    Farbe: weiß;    
}
div{
    Rand links: 25 %;
    Polsterung: 1px 16px;
    Höhe: 100px;
    
}

<2>Das Wirkungsdiagramm ist wie folgt:

(3) Horizontale Navigationsleiste

<1>Der Code lautet wie folgt:

<!doctype html>
<html>
    <Kopf> 
        <meta charset="utf-8"> 
        <title>Horizontale Navigationsleiste</title> 
        <link rel="stylesheet" href="daohanglan2.css"/>
    </Kopf>
    <Text>
        <ul>
            <li><a class="active" href="#home">Startseite</a></li>
            <li><a href="#news">Neuigkeiten</a></li>
            <li><a href="#contact">Kontakt</a></li>
            <li style="float:right"><a href="#about">Über</a></li>
        </ul>
        <div Klasse="Box">
            <h2>Horizontale Navigationsleiste</h2>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            <p>Horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste; horizontale Navigationsleiste</p>
            </div>
    </body>
</html>
Körper{
    Rand: 0;
}
ul{
    Polsterung: 0px;
    Rand: 0px;
    Listenstiltyp: keiner;
    Hintergrundfarbe: #333;
    Überlauf: versteckt;
    
    Position: fest;
    oben: 0px;
    Breite: 100 %;
}
ul>li{
    schweben: links;
    Rahmen rechts: 1px durchgezogen #fff;
    Anzeige: Inline;
}
ul>li:letztes-Kind{
    Rand rechts: keine;
    
}
A{
    Polsterung: 14px 16px;
    
    Anzeige:Block;
    Breite: 60px;
    
    Textausrichtung: zentriert;
    
    Textdekoration: keine;
    Farbe: weiß;
    
}

li a:hover:nicht(.aktiv) {
    Hintergrundfarbe: #111;
}
    
li a.aktiv {
    Farbe: weiß;
    Hintergrundfarbe: #4CAF50;
}
.box{padding:20px;
Rand oben: 30px;
Hintergrundfarbe: #1abc9c;
Höhe: 1500px;}

<2>Das Wirkungsdiagramm ist wie folgt:

2. Dropdown-Menü

(1) Funktion des Dropdown-Menüs

Das Dropdown-Menü kann Ihre Webseite weniger langweilig machen und Sie können das Erscheinungsbild der Webseite über CSS ändern, was auch für den Webseiten-Satz unverzichtbar ist.

(2) Dropdown-Menü

<1>Der Code lautet wie folgt:

<!doctype html>
<html>
<Kopf>
    <meta charset="utf-8"/>
    <Titel></Titel>


    <link rel="stylesheet" type="text/css" href="xialacaidan.css"/>


</Kopf>
<Text>


    <div Klasse="Dropdown">
        <span>
            Dropdown-Menü
        <div Klasse="di">
            <ul>
                <li>Hallo! </li>
                <li>Mir geht es gut! </li>
                <li>Hallo zusammen! </li>
            </ul>
        
        </div>
    </div>


</body>
</html>
Körper{
    Rand: 0;
    Textausrichtung: zentriert;
}
.runterfallen{
    
    Hintergrundfarbe: grün;
    Textausrichtung: zentriert;
    Polsterung: 20px;
    Anzeige: Inline-Block;
    Cursor:Zeiger;
    Position: relativ;
}
.di{
    Anzeige: keine;
    Position: absolut;
    oben: 61px;
    links: 0;
}
.di ul{
    Listenstil: keiner;
    Polsterung: 0;
    Rand: 0;
    Hintergrundfarbe: #f9f9f9;
    Kastenschatten: 0px 8px 16px 0px rgba (0,0,0,0,2);
}
.di ul li{
    Mindestbreite: 104px;
    Polsterung: 10px 15px;
    
}
.dropdown:hover{
    Hintergrundfarbe: #3e8e41
}
.dropdown:hover .di{
    Anzeige:Block;
    
}
.di ul li:hover{
    Hintergrundfarbe: #f1f1f1
}

<2>Das Effektdiagramm ist wie folgt

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu

>>:  W3C Tutorial (11): W3C DOM Aktivitäten

Artikel empfehlen

MySQL 8.0.19 Win10 - Schnellinstallations-Tutorial

Dieses Tutorial enthält das Installationstutorial...

SpringBoot integriert Activiti7-Implementierungscode

Nach der offiziellen Veröffentlichung von Activit...

CSS-Positionierungslayout (Position, Positionierungslayoutfähigkeiten)

1. Was ist Positionierung? Das Positionsattribut ...

Schritte zum Übertragen von Dateien und Ordnern zwischen zwei Linux-Servern

Heute habe ich mich mit der Migration eines Proje...

Detaillierte Schritte zur schnellen Installation von Openshift

Der schnellste Weg, die neueste Version von OpenS...

Zusammenfassung häufig verwendeter Befehle für die Einreichung von Docker-Wettbewerben

Melden Sie sich bei Ihrem Konto an export DOCKER_...

Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen

Im Laufe der Zeit habe ich festgestellt, dass vie...

Detaillierte Erklärung des Update-Befehls für Software (Bibliothek) unter Linux

Beim Installieren von Paketen auf einem Ubuntu-Se...

Detailliertes Tutorial zur Installation von Harbor Private Warehouse mit Docker Compose

Überblick Was ist Hafen? Das englische Wort bedeu...

Detaillierte Erklärung der Bedeutung von Standard-Commit-Nachrichten in der JavaScript-Entwicklung

Inhaltsverzeichnis Die Bedeutung der Standard-Com...

Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls

Ich habe node.js zum Erstellen des Servers gewähl...

Bootstrap FileInput implementiert Bild-Upload-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Einführung in die Verwendung von em im elastischen Layout in CSS3: Wie viele Pixel sind 1em?

Ich verwende CSS schon seit langer Zeit, habe jed...

Ein Artikel zum Verständnis der Erstellung, des Hochladens, Abrufens und Bereitstellens von Docker-Images

Inhaltsverzeichnis 1. Bilder 1. Was ist ein Spieg...

Erfahrungsaustausch zur MySQL-Slave-Wartung

Vorwort: Die MySQL-Master-Slave-Architektur dürft...