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
Über 3 gängige Pakete der REM-Anpassung
Vorwort Ich habe bereits einen Artikel über REM-A...
Verschachtelte Anzeigeimplementierung der Vue-Router-Ansicht
Inhaltsverzeichnis 1. Routing-Konfiguration 2. Vu...
So überwachen Sie die Windows-Leistung auf Zabbix
Hintergrundinformationen Ich habe kürzlich einige...
Navicat importiert CSV-Daten in MySQL
In diesem Artikel erfahren Sie, wie Sie mit Navic...
Unterschiede und Vergleiche von Speicher-Engines in MySQL
MyISAM-Speicher-Engine MyISAM basiert auf der ISA...
Zusammenfassung von 7 Gründen, warum Docker nicht für die Bereitstellung von Datenbanken geeignet ist
Docker erfreut sich seit zwei Jahren großer Belie...
Detaillierte Einführung in die Installations- und Konfigurationsregeln von Nginx
Inhaltsverzeichnis 1. Installation und Betrieb vo...
Detaillierte Schritte zum Erstellen der visuellen Portainer-Schnittstelle mit Docker
Um das zuletzt erwähnte Problem zu lösen, habe ic...
So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)
Überlauf ausblenden Damit ist gemeint, dass Text-...
Detaillierte Erklärung der Methoden und Eigenschaften von Vue
Vue-Methoden und -Eigenschaften 1. Methoden Verwe...
So verwenden Sie vue3+TypeScript+vue-router
Inhaltsverzeichnis Einfach zu bedienen Erstellen ...
Detaillierte Verwendung des Linux-Textsuchbefehls find
Der Befehl „Find“ wird hauptsächlich zum Suchen v...
Mit wie vielen Pixeln sollte eine Webseite gestaltet werden?
Viele Webdesigner sind beim Entwurf des Webseitenl...
Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI
Vorwort: Ich habe das geschrieben, weil ich meine...
Tiefgreifendes Verständnis des asynchronen Wartens in Javascript
In diesem Artikel untersuchen wir, warum async/aw...