CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste
|
Implementierungseffektdiagramm für die Navigationsleiste, die feste obere Navigationsleiste und das sekundäre Menü:
Aktualisierung 16.11.2018: Neue Code-Implementierung (optimiertes Layout):
<html>
<Kopf>
<style type="text/css">
.Spitze{
/* Breite, Höhe, Hintergrundfarbe festlegen */
height: auto; /*Ändere die Höhe auf automatische Höhe*/
Breite: 100 %;
Rand links: 0;
Hintergrund: RGB (189, 181, 181);
Position: fest; /*Oben fixiert*/
top: 0;/*Der Abstand von oben beträgt 0*/
Rand unten: 5px;
}
.top ul{
/* Löscht den Standardstil des ul-Tags */
width: auto;/*Die Breite wird ebenfalls auf automatisch geändert*/
Listenstiltyp: keiner;
Leerzeichen:nowrap;
Überlauf: versteckt;
Rand links: 5 %;
/* oberer Rand: 0; */
Polsterung: 0;
}
.top li {
float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
margin-right:2%; /* Der Abstand zwischen zwei Linien*/
Position: relativ;
Überlauf: versteckt;
}
.top li a{
/* Anzeigeformat für Linkinhalte festlegen */
display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
Farbe: weiß;
Textausrichtung: zentriert;
Polsterung: 3px;
Überlauf: versteckt;
Textdekoration: keine; /* Unterstreichung entfernen */
}
.top li a:hover{
/* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
Hintergrundfarbe: #111;
}
.top ul li ul{
/* Sekundäres Menü einrichten */
Rand links: -0,2px;
Hintergrund: RGB (189, 181, 181);
Position: relativ;
Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/
}
.top ul li ul li{
/* Anzeige des Inhalts des sekundären Menüs li*/
Schwimmer: keine;
Textausrichtung: zentriert;
}
.top ul li:hover ul{
/* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
Anzeige: Block;
}
Körper{
Hintergrund: #eff3f5;
}
</Stil>
<Text>
<div Klasse="oben">
<Mitte>
<ul>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#"><b>Menü der ersten Ebene</b></a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li>
<a href="#">Menü der ersten Ebene</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</Kopf>
</html>Unten sehen Sie die ursprüngliche Codeimplementierung (beim Layout der Navigationsseite tritt ein Problem auf, wenn die Seite vergrößert oder verkleinert wird):
<html>
<Kopf>
<style type="text/css">
.Spitze{
/* Breite, Höhe, Hintergrundfarbe festlegen */
Höhe: 50px;
Breite: 100 %;
Hintergrund: RGB (189, 181, 181);
Position: fest; /*Oben fixiert*/
top: 0;/*Der Abstand von oben beträgt 0*/
}
.top ul{
/* Löscht den Standardstil des ul-Tags */
Breite: 80%;
Listenstiltyp: keiner;
Rand: 0;
Polsterung: 0;
Überlauf: versteckt;
}
.top li {
float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
margin-right:50px; /* Abstand zwischen zwei Zeilen*/
}
.top li a{
/* Anzeigeformat für Linkinhalte festlegen */
display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
Farbe: weiß;
Textausrichtung: zentriert;
Polsterung: 14px 16px;
Textdekoration: keine; /* Unterstreichung entfernen */
}
.top li a:hover{
/* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
Hintergrundfarbe: #111;
}
.top ul li ul{
/* Sekundäres Menü einrichten */
Breite: automatisch;
Hintergrund: RGB (189, 181, 181);
Position: absolut;
Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/
}
.top ul li ul li{
/* Anzeige des Inhalts des sekundären Menüs li*/
Rand rechts: 0;
Schwimmer: keine;
Textausrichtung: zentriert;
}
.top ul li:hover ul{
/* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
Anzeige: Block;
}
</Stil>
<Text>
<div Klasse="oben">
<Mitte>
<ul>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Episodenmenü</a></li>
<li><a href="#"><b>Menü der ersten Ebene</b></a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li>
<a href="#">Menü der ersten Ebene</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</Kopf>
</html>Dies ist das Ende dieses Artikels über die Verwendung von CSS+HTML zur Implementierung der Funktion der oberen Navigationsleiste. Weitere relevante CSS-Inhalte zur oberen Navigationsleiste finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript
Artikel empfehlen
So verwenden Sie die Vue-Cache-Funktion
Inhaltsverzeichnis Cache-Funktion in vue2 Transfo...
Nginx-Zugriffssteuerungs- und Parameteroptimierungsmethoden
Globale Nginx-Variablen Es gibt viele globale Var...
So stellen Sie versehentlich gelöschte Nachrichtendateien unter Linux wieder her
Wenn Dateien von einem Prozess verwendet und vers...
Detaillierte Erläuterung zur Lösung des Problems des domänenübergreifenden Zugriffs auf statische Nginx/Apache-Ressourcen
1. Domänenübergreifender Zugriff auf statische Ap...
JavaScript zum Erzielen eines Lupeneffekts
In diesem Artikel wird der spezifische Code für J...
Codebeispiele für die Sicherung mehrerer MySQL-Datenbanken
In diesem Artikel werden hauptsächlich Codebeispi...
Erläuterung synthetischer React-Ereignisse
Inhaltsverzeichnis Klicken Sie zunächst auf das E...
Vue verwendet drei Methoden zum Aktualisieren der Seite
Beim Schreiben von Projekten stoßen wir häufig au...
Docker verpackt das lokale Image und stellt es auf anderen Maschinen wieder her
1. Verwenden Sie Docker-Images, um alle Image-Dat...
Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften
Zunächst müssen Sie einige Eigenschaften von HTML...
Analyse und Lösung der Gründe, warum HTML-externe Referenz-CSS-Dateien nicht effektiv sind
Als Frontend-Neuling habe ich einige Tage am Front...
Detaillierte Erläuterung der Methode zur Bestimmung des einzelnen Masterknotens von MySQL 5.7 MGR
Der MGR unserer Bank wird Ende des Jahres eingefü...
So lösen Sie das Problem, dass Seata die MySQL 8-Version nicht verwenden kann
Mögliche Gründe: Der Hauptgrund, warum Seata MySQ...
Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv
Detaillierte Erklärung des Java-Aufrufs von ffmpe...
Die Hook-Funktion von Vue-Router implementiert Routing Guard
Inhaltsverzeichnis Überblick Globale Hook-Funktio...