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-Variablenprinzipien und Anwendungsbeispiele

In der MySQL-Dokumentation können MySQL-Variablen...

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Das mit CLI3 erstellte Vue-Projekt wird als Nullk...

So bedienen Sie Docker und Images

Spiegel finden Wir können auf der Docker Hub-Webs...

So stellen Sie ein SpringBoot-Projekt mit Docker bereit

Die Entwicklung der Docker-Technologie bietet ein...

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

Eine Vektorwelle <svg viewBox="0 0 560 20...

Aktivieren Sie den SSHD-Vorgang im Docker

Installieren Sie zunächst den OpenSSH-Server im D...

Verwenden Sie in JS nicht mehr überall Operatoren für absolute Gleichheit.

Inhaltsverzeichnis Überblick 1. Test auf Nullwert...

Detaillierte Zusammenfassung der MySQL-SQL-Anweisungen zum Erstellen von Tabellen

MySQL-SQL-Anweisung zum Erstellen einer Tabelle A...

Ein Artikel zum Erlernen von Fähigkeiten zur Optimierung von MySQL-Indexabfragen

Vorwort In diesem Artikel sind einige allgemeine ...

So zeigen Sie den Speicherort von MySQL-Datendateien an

Wir haben möglicherweise eine Frage: Nachdem wir ...

Ein mobiler adaptiver Webseiteneffekt löst das Problem der kleinen Anzeigeseite

Für die Arbeit muss ich einen adaptiven Webseitene...

Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl

Die Web-Farbauswahlfunktion in diesem Beispiel ve...

Dynamische Vue-Komponente

Inhaltsverzeichnis 1. Komponente 2. Keep-Alive-Mo...

Vergleich der von der MySQL-Datenbank unterstützten Speicher-Engines

Inhaltsverzeichnis Speicher-Engine Von MySQL unte...

Detaillierte Erklärung der Nginx-Konfigurationsdatei

Die Hauptkonfigurationsdatei von Nginx ist nginx....