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
Detaillierte Beschreibung des Lebenszyklus von React-Komponenten
Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....
So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs
In diesem Artikel wird der spezifische Code für J...
Gängige Stile von CSS-Animationseffekten
Animation Definieren Sie eine Animation: /*Legen ...
Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks
Ein neues Fenster wird geöffnet. Vorteile: Wenn d...
So erweitern Sie Vue Router-Links in Vue 3
Vorwort Das Tag <router-link> ist ein großa...
Optimierung des MySQL Thread_Stack-Verbindungsthreads
MySQL kann nicht nur über das Netzwerk, sondern a...
Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript
1. Konzept Sie alle sind Attribute des Elements u...
js implementiert Axios Limit-Anforderungswarteschlange
Inhaltsverzeichnis Der Hintergrund ist: Was wird ...
HTML validieren HTML-Validierung
„HTML-Validierung“ bezieht sich auf die HTML-Valid...
Docker startet den Implementierungsprozess der MySQL-Konfiguration
Inhaltsverzeichnis Tatsächlicher Kampfprozess Beg...
Lösung für den Fehler 2059 beim Verbinden von Navicat mit MySQL
Als ich kürzlich Django lernte, musste ich eine D...
HTML realisiert Echtzeit-Überwachungsfunktion der Hikvision-Kamera
Das Unternehmen hat vor Kurzem einige CCFA-Aktivi...
Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker
Inhaltsverzeichnis Tomcat mit Docker installieren...
Designtheorie: Lesbarkeit und Verständlichkeit von Texten
<br />Vor nicht allzu langer Zeit habe ich a...