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
Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF
Technologie nutzen itext.jar: Konvertiert den Byt...
Vue implementiert Ankerpositionierungsfunktion
In diesem Artikelbeispiel wird der spezifische Co...
js zur Realisierung der Web-Message-Board-Funktion
In diesem Artikelbeispiel wird der spezifische JS...
HTML-Head-Tag-Metadaten zum Erreichen einer Aktualisierungsumleitung
Code kopieren Der Code lautet wie folgt: <html...
Einführung in die SSL- und WSS-Schritte für die Nginx-Konfiguration
Inhaltsverzeichnis Vorwort 1. Nginx-Installation ...
Detailliertes Installations- und Konfigurationstutorial für mysql5.7 unter CentOS
Installieren Stellen Sie sicher, dass Ihr Benutze...
Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?
Viele Webdesigner sind beim Entwurf des Webseitenl...
Ein Beispiel für die Verwendung von CSS3-Animation, um den Effekt eines Kreises zu erzielen, der sich von klein nach groß ausdehnt und nach außen ausbreitet
Vorwort In diesem Artikel wird hauptsächlich ein ...
MySQL 8.0.18 Installations-Tutorial unter Windows (Abbildung)
Herunterladen Download-Adresse: https://dev.mysql...
Erfahrung im Webdesign
<br />Der Autor war früher ein Anfänger im W...
Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code
Inhaltsverzeichnis Grundlegende HTML-Struktur Gen...
Verständnis des CSS-Selektorgewichts (persönlicher Test)
Code kopieren Der Code lautet wie folgt: <styl...
Spezifische Verwendung des Linux-Man-Befehls
01. Befehlsübersicht Linux bietet ein umfangreich...
Detaillierte Erklärung der JavaScript-Ereignisse onblur und onfocus
Auf HTML-Seiten verfügen visuelle Elemente wie Sc...
So verwenden Sie den Linux-Befehl nl
1. Befehlseinführung nl (Anzahl der Zeilen) fügt ...