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

Informationen zu Problemen bei der automatischen Bereitstellung von Jenkins + Docker + ASP.NET Core (Fallstricke vermeiden)

Ich hatte nicht vor, diesen Blog zu schreiben, ab...

Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind

Vorwort Ich arbeite derzeit an der Datenanalysepl...

Einführung in die Verwendung der unbestimmten Eigenschaft des Kontrollkästchens

Wenn wir das Dialogfeld „Ordnereigenschaften“ in W...

CSS implementiert sechs adaptive zweispaltige Layoutmethoden

HTML-Struktur <Text> <div Klasse="W...

Wie kompliziert ist die Priorität von CSS-Stilen?

Gestern Abend habe ich mir eine Interviewfrage ang...

Der neueste Linux-Installationsprozess von Tomcat8

Herunterladen https://tomcat.apache.org/download-...

Was ist Makefile in Linux? Wie funktioniert es?

Führen Sie Ihre Programme mit diesem praktischen ...

10 Aspekte, die beim Entwurf und Aufbau einer umfangreichen Website-Architektur berücksichtigt werden müssen

Wir diskutieren hier nicht über PHP-, JSP- oder ....

Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode

Kürzlich habe ich festgestellt, dass die Serverze...

Auszeichnungssprache - CSS-Stile für Text festlegen

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

So verwenden Sie die Vue-Timeline-Komponente

In diesem Artikelbeispiel wird der spezifische Im...

Detaillierte Erklärung der Verwendung von publicPath in Webpack

Inhaltsverzeichnis Ausgabe Ausgabepfad Ausgabe.öf...

7 interessante Möglichkeiten, versteckte Elemente in CSS zu erreichen

Vorwort Die Ähnlichkeiten und Unterschiede zwisch...

Müssen die Texte der Website noch gestaltet werden?

Viele fragen sich vielleicht: Muss der Text auf d...

So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL

Typische MySQL-Szenarien: Schnittmenge und Differ...