HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation
|
HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation. Der spezifische Code lautet wie folgt: Demonstration Abbildung 1
<!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=utf-8" />
<title>html+CSS imitieren das Dropdown-Menü der Baidu-Enzyklopädie-Navigation</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</Kopf>
<Text>
<div Klasse="Header">
<div Klasse="obere Leiste">
Header-Inhalt</div>
<div Klasse="Navigationsleiste">
<div Klasse="nav-bg">
<div Klasse="nav-top">
<div Klasse="Navigationsinhalt">
<ul Klasse="Navigationsinhalt-Box">
<li Klasse="Index ein">
<span><a href="#">Startseite</a></span>
</li>
<li Klasse="Katze">
<span><a href="#">Kategorie</a></span>
<ul>
<li><a href="#">Natur</a></li>
<li><a href="#">Kultur</a></li>
<li><a href="#">Geographie</a></li>
<li><a href="#">Geschichte</a></li>
<li><a href="#">Leben</a></li>
<li><a href="#">Gesellschaft</a></li>
<li><a href="#">Kunst</a></li>
<li><a href="#">Zeichen</a></li>
<li><a href="#">Wirtschaft</a></li>
<li><a href="#">Technologie</a></li>
<li><a href="#">Sport</a></li>
</ul>
</li>
<li Klasse="Spezial">
<span><a href="javascript:void(0)">Ausgewählte Enzyklopädie</a></span>
<ul>
<li><a href="#">Heute in der Geschichte</a></li>
<li><a href="#">Digitales Museum</a></li>
<li><a href="#">Städtelexikon</a></li>
<li><a href="#">Hochschul-Enzyklopädie</a></li>
<li><a href="#">Kunst-Enzyklopädie</a></li>
<li><a href="#">Wissenschaftsenzyklopädie</a></li>
</ul>
</li>
<li Klasse="Benutzer">
<span><a href="javascript:void(0)">Benutzer</a></span>
<ul>
<li><a href="#">Kaulquappengruppe</a></li>
<li><a href="#">Traumplan</a></li>
<li><a href="#">Enzyklopädie-Aufgaben</a></li>
<li><a href="#">Wikipedia Mall</a></li>
</ul>
</li>
<li class="Zusammenarbeit">
<span><a href="javascript:void(0)">Autoritative Zusammenarbeit</a></span>
<ul>
<li><a href="#">Kooperationsmodus</a></li>
<li><a href="#">Häufig gestellte Fragen</a></li>
<li><a href="#">Kontaktinformationen</a></li>
</ul>
</li>
<li Klasse="mobil">
<span><a href="javascript:void(0)">Mobile Enzyklopädie</a></span>
<ul>
<li><a href="#">Kunde</a></li>
<li><a href="#">Webversion</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Stil
body{margin:0;padding:0;font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif;;}
.top-bar{Hintergrundfarbe:#f3f3f3;Textausrichtung:Mitte;Padding:2.5em;}
a{padding-bottom:3px;Farbe:weiß;Text-Decoration:none;}
ul{Listenstil: keine;Padding: 0;Margin: 0;}
li{text-align:center;}
.nav-bar{position:relative;z-index:1000;überlauf:versteckt;min-breite:900px;höhe:45px;}
.nav-bar:hover{overflow:visible;-webkit-transition:alles 0,5 s langsam;transition:alles 0,5 s langsam;}
.nav-bg{position:absolute;width:100%;height:272px;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}
.nav-top{height:43px;border-top:1px solid #5895d5;border-bottom:1px solid #3b92e9;background:#459df5;}
.nav-content{position:absolute;width:80%;left:10%;}
.nav-content-box{position:absolut;oben:0;links:0;Breite:100%;}
.nav-content-box>li{float:left;line-height:43px;}
.nav-content-box>li:hover{background:#19508b;}
.nav-content-box>li>span>a{display:block;width:100%;margin:0;height:41px;line-height:41px;}
.nav-content-box>li:hover>span>a{background:#338ce6;}
ul>li.index,ul>li.cat,ul>li.special,ul>li.user,ul>li.cooperation,ul>li.mobile{width:120px;}
ul>li.index{height:43px;}
ul.nav-content-box>li>ul{border-right:solid 1px #3a6fa2;margin:10px 0 6px}
ul.nav-content-box>li>ul:after{Sichtbarkeit:versteckt;Anzeige:block;Schriftgröße:0;Inhalt:" ";Löschen:beide;Höhe:0}
.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}
ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}
ul.nav-content-box>li.cat>ul>li{width:49%;}
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}Zusammenfassen Oben sehen Sie die vom Herausgeber eingeführte HTML-Imitation der Dropdown-Menüfunktion für die Navigation in der Baidu-Enzyklopädie. Ich hoffe, sie ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Bezüglich der chinesischen verstümmelten Zeichen bei der Übertragung eines href-Parameters
>>: Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden
Artikel empfehlen
So kommunizieren Sie mit anderen Benutzern über die Linux-Befehlszeile
Es ist ganz einfach, Nachrichten an andere Benutz...
Analyse der vier Transaktionsisolationsstufen in MySQL anhand von Beispielen
Vorwort Um bei Datenbankoperationen die Richtigke...
Nginx-Konfigurationsvorgang für den externen Netzwerkzugriff auf die Intranet-Site
Hintergrund: Die Site ist vom Front- und Back-End...
So beheben Sie den MySQL-Fehler 10061
In diesem Artikel erfahren Sie die Lösung für das...
Lösungen für Websites mit hohem Datenverkehr
Erstens: Stellen Sie zunächst sicher, dass die Ser...
So verwenden Sie MQTT im Uniapp-Projekt
Inhaltsverzeichnis 1. Referenz-Plugins im Uniapp ...
JS ES neue Funktionen Vorlagenzeichenfolge
Inhaltsverzeichnis 1. Was ist eine Vorlagenzeiche...
JavaScript-Implementierung des Spiels des Lebens
Inhaltsverzeichnis Konzept-Einführung Logische Re...
Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage
Inhaltsverzeichnis Fallstricke bei Zeitstempelver...
HTML6 implementiert Beispielcode für Faltmenüs und Akkordeonmenüs
Der Hauptteil der Seite: <body> <ul id=&...
So verwenden Sie den Linux-Befehl md5sum
01. Befehlsübersicht md5sum - MD5-Prüfcode berech...
Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse
Warum sind die von Ihnen geschriebenen SQL-Abfrag...
Vue implementiert Card-Flip-Karussellanzeige
Karussellanzeige der Vue-Karte beim Umschalten de...
20 CSS-Codierungstipps für mehr Effizienz (sortiert)
In diesem Artikel möchten wir eine Sammlung von 2...
Einführung in die Cloud-native-Technologie Kubernetes (K8S)
Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...