CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode
|
Viele Webseiten haben kleine Dreiecke in ihren Navigationsleisten und es ist eigentlich ganz einfach, diese Funktion zu implementieren. Nehmen Sie als Beispiel die Homepage-Navigation des Rookie-Tutorials Schreiben Sie zunächst ein großes div_nav, und „Home“, „Rookie Notes“, „Rookie Tools“, „Reference Manual“ usw. werden als Divs in div_nav aufgenommen. Die Div_Nav-Hintergrundfarbe wird auf die entsprechende Farbe eingestellt. Der Code zur Einstellung der Hintergrundfarbe lautet wie folgt:
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
Farbe: #fff;
Hintergrund: transparente URL (Bilder/blueslate_backgroundOVER.gif) keine Wiederholung oben in der Mitte;
}Im Augenblick:
.blue #slatenav ul li a:hover, .blue #slatenav ul li a.current Die Anmerkungen zum Code in der obigen Abbildung sind: Die ID ist die li von ul im Menü. Das heißt, jedes Element in der Navigationsleiste. Der Effekt wird angezeigt, wenn Sie die Maus darauf bewegen. Das UL wird am Ende hinzugefügt, um anzuzeigen, dass das Popup ein UL-Element ist Das gesamte CSS gibt hier den Stil dieses ul-Elements an. Vereinfacht ausgedrückt handelt es sich dabei um den Effekt der Mausbewegung über die Navigationsleiste Beispielsweise legen wir in HTML die Schriftfarbe eines Label-Elements fest, wenn sich die Maus darüber befindet:
ein:hover{Farbe:rot;}a:hover bedeutet, dass sich die Maus darüber befindet a:current sollte bedeuten, den Fokus zu bekommen. Das kleine Dreieck lässt sich ebenfalls leicht einstellen
.blau #slatenav
{position:relativ;
Anzeige:Block;
Höhe: 42px;
Schriftgröße: 11px;
Schriftstärke: fett;
Hintergrund: transparente URL (Bilder/blueslate_background.gif) Wiederholung-x oben links;
Schriftfamilie: Arial, Verdana, Helvitica, serifenlos; Texttransformation: Großbuchstaben;
}Verwenden Sie den Hintergrund, um das Hintergrundbild kleiner Divs wie „Homepage“ festzulegen. Der obige Text legt den Effekt fest, wenn die Maus über das Etikett fährt. Wenn die Maus also über andere Etiketten fährt, wird auch ein kleiner dreieckiger Hintergrund angezeigt.
Wenn die Maus über andere Registerkarten bewegt wird:
Okay, jetzt ist eine Navigation mit einem kleinen Dreieck fertig. Die anderen Details können Sie selbst anpassen. Hinweis: Der Dokument-Namespace wird im Code deklariert. Durch das Schreiben des <html>-Tags allein wird der Namespace des Dokuments nicht deklariert. Durch das Hinzufügen von xmlns=" http://www.w3.org/1999/xhtml " wird der Namespace des Dokuments jedoch deklariert. Nachdem Sie den Namespace deklariert haben, folgt der Browser dieser Spezifikation beim Parsen der Tags Ihres HTML-Dokuments. Bei normaler Verwendung werden Sie zwischen den beiden keinen großen Unterschied spüren. Der Sonderfall ist die Interpretation einiger Tags. Beispielsweise erfordert die XHTML-Namenskonvention, dass alle Tags streng geschlossen sein müssen und am Ende eines einzelnen Tags ein "/" hinzugefügt werden muss. Wenn Sie die XHTML-Namenskonvention verwenden, die Konvention beim Schreiben von Tags jedoch nicht einhalten, kann das Tag möglicherweise nicht analysiert werden. Daher ist es eine gute Schreibgewohnheit, ein schließendes Tag hinzuzufügen. Hängen Sie den Quellcode an: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" /> <meta name="Schlüsselwörter" content=" " /> <meta name="Beschreibung" Inhalt=" " /> <title>Horizontale Navigation</title> <link rel="stylesheet" href="style.css" type="text/css" /> </Kopf> <body-Stil="text-align:center"> <p> </p> <div Klasse="blau"> <div id="slatenav"> <ul> <li><a href="http://sc.chinaz.com/" title="css-Menüs" class="current">Startseite</a></li> <li><a href="http://sc.chinaz.com/" title="css-Menüs">Anmerkungen für Anfänger</a></li> <li><a href="http://sc.chinaz.com/" title="css-Menüs">Tools für Anfänger</a></li> <li><a href="http://sc.chinaz.com/" title="css menus">Referenzhandbuch</a></li> <li><a href="http://sc.chinaz.com/" title="css menus">Benutzerhinweise</a></li> <li><a href="http://sc.chinaz.com/" title="css-Menüs">Test/Prüfung</a></li> <li><a href="http://sc.chinaz.com/" title="css menus">Lokale Lesezeichen</a></li> <li><a href="http://sc.chinaz.com/" title="css-Menüs">Anmelden</a></li> </ul> </div> </div> </body> </html> 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. |
<<: XHTML-Tutorial: Der Unterschied zwischen Transitional und Strict
>>: MySQL-String-Aufteilungsvorgang (String-Abfangen mit Trennzeichen)
Artikel empfehlen
Verstehen Sie die Verwendung von benutzerdefinierten Anweisungen für Vue2.x und Vue3.x und das Prinzip der Hook-Funktionen
Inhaltsverzeichnis Vue2.x-Nutzung Globale Registr...
Detaillierte Erklärung zum Hinzufügen gepunkteter Linien zu Vue-Elementbaum-Steuerelementen
Inhaltsverzeichnis 1. Ergebnisse erzielen 2. Impl...
Problemanalyse der Verwendung einer Idee zum Erstellen eines Springboot-Initialisiererservers
Problembeschreibung Als ich kürzlich ein Springbo...
js und jquery, um einen Tab-Statusleisten-Umschalteffekt zu erzielen
Heute werden wir einen einfachen Fall durchgehen ...
JavaScript realisiert den Warteschlangenstrukturprozess
Inhaltsverzeichnis 1. Warteschlangen verstehen 2....
So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)
Probieren wir hier den Reverse-Proxy von Nginx au...
Eine einfache Möglichkeit, den CSS-, JavaScript- und Hintergrundbild-Cache im Browser zu leeren
Im eigentlichen Projektentwicklungsprozess wird di...
Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann
Zwei kleine Probleme, die mich aber lange Zeit ges...
Zusammenfassung der Wissenspunkte im Zusammenhang mit Null (IFNULL, COALESCE und NULLIF) in MySQL
Dieser Artikel erläutert anhand von Beispielen di...
MySQL count: ausführliche Erklärung und Funktionsbeispielcode
Detaillierte Erklärung der MySQL-Anzahl Die Funkt...
Detaillierte Erläuterung der benutzerdefinierten Ereignisinhaltsverteilung von Vue
1. Dies ist etwas kompliziert zu verstehen. Ich h...
Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen
Hintergrund - Online Alert Ein Online-Server hat ...
Detaillierte Schritte zum Upgrade von mysql8.0.11 auf mysql8.0.17 unter Win2008
Upgrade-Hintergrund: Um die Sicherheitslücke in d...
So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)
Vorwort Kürzlich mit mysql /usr/local/mysql/bin/m...
Installieren des Betriebssystems Windows Server 2008 auf einer virtuellen Maschine
Dieser Artikel stellt die Installation des Window...