Heim > Artikel > Web-Frontend > Verwenden Sie die Tags ul und li, um ein horizontales CSS-Navigationsmenü zu erstellen
Verwenden Sie die Tags ul und li, um ein horizontales CSS-Navigationsmenü zu erstellen
- 高洛峰Original
- 2016-11-24 11:45:492258Durchsuche
Die vielleicht einfachste Lösung zum Erstellen einer Textnavigationsleiste im CSS-Stil besteht darin, alle Links in einer Textzeile zu platzieren. Diese Methode erscheint vernünftig und intuitiv. Das Problem besteht jedoch darin, dass es schwierig ist, den Leerraum zwischen den Links sowie davor und danach zu kontrollieren, wenn alle Links in einer Textzeile platziert werden. Um also zu vermeiden, dass alle Links zusammengepfercht werden, müssen Sie am Ende normalerweise etwas oder ein Leerzeichen, das kein Zeilenumbruch ist, als Trennzeichen einfügen, um den Text getrennt und nicht vermischt zu halten.
Unser normaler Ansatz besteht jetzt darin, ul- und li-Tags zu verwenden, um Links als ungeordnete Liste zu identifizieren. Wenden Sie dann CSS-Stile an, um es zu steuern und wie erwartet im Container anzuzeigen. Die Verwendung einer ungeordneten Liste für eine Navigationsleiste erscheint kontraintuitiv, da wir es gewohnt sind, uns eine ungeordnete Liste als vertikal nach oben verschobenes Listenelement vorzustellen, vor dem jeweils eine voreingestellte Listenmarkierung platziert ist. Dies scheint nicht mit der horizontalen Ausrichtung der Navigationsleiste vereinbar zu sein. Die logische Struktur einer Liste als Sammlung unabhängiger Listenelemente kann jedoch auf Links in der Navigationsleiste angewendet werden, und CSS-Regeln ermöglichen es Ihnen, die Standarddarstellung von Listenelementen zu erzwingen, um diese zu entfernen und die Listenelemente horizontal im Container anzuordnen. statt Top-Down-Regeln. Schauen wir uns nun ein Beispiel an, um ein horizontales Navigationsmenü mit CSS-Stilen und XHTML-Tags basierend auf einer ungeordneten Liste zu erstellen.
CSS-Code
<div id="nav">
<ul>
<li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> </ul>
</div>Werfen wir einen Blick auf diesen CSS-Code:
CSS-Code
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
whitewhite-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}Sehen wir uns den vollständigen HTML-Code des obigen Codes an und fügen ihn in eine HTML-Seite ein. Sie können den Effekt sehen:
XML/HTML-Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
#nav {
height: 30px;
width: 100%;
background-color: #c00;
}
#nav ul {
margin: 0 0 0 30px;
padding: 0px;
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
#nav li {
list-style-type: none;
display: inline;
}
#nav li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding: 7px 10px;
color: #FFF;
}
#nav li a:hover {
color: #ff0;
background-color: #f00;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/">CSS教程</a></li>
<li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> <li><a href="http://www.php1.cn/"> </ul>
</div>
</body>
</html>Lassen Sie uns den obigen Code analysieren:
Der XHTML-Code definiert zunächst einen Container div id="nav". Dieser Container wird verwendet, um den Inhalt des horizontalen Navigationsmenüs dieser ungeordneten Liste zu platzieren. Einige Leute halten diesen Container jedoch für überflüssig und definieren einfach ul id="nav" direkt. Wir empfehlen Ihnen, dies nicht zu tun. Sie müssen wissen, dass unsere Website skalierbar ist und wir genügend Raum für zukünftige Erweiterungen lassen müssen. Wenn unser Navigationsstil komplexer sein soll, wird UL unseren Anforderungen nicht gerecht. Unsere Definition eines solchen Containers entspricht auch eher unseren Programmiergewohnheiten.
#nav definiert die Breite, Höhe und Hintergrundfarbe des Fensters. #nav ul enthält Rand- und Fülldeklarationen sowie Schriftart- und Farbdeklarationen. line-height: 30px; ist eine sehr wichtige Definition. Wenn die Definition der Zeilenhöhe aufgehoben wird, kann dies die vertikale Zentrierung unseres Linktextes beeinträchtigen. white-space: nowrap; Vielleicht verstehen Sie nicht, was es bewirkt. Es definiert, dass der gesamte Text in derselben Zeile angezeigt wird, bis der Text endet oder das br-Objekt gefunden wird.
List-style-type: none in #nav li; entfernt das von Listenelementen verwendete Standard-Tag. Machen Sie es eher zu reinem Text ohne Listenmarkierung. Mit der display: inline;-Anweisung können die Listenelemente von links nach rechts auf der Seite verschoben werden, anstatt dass jedes Element in einer separaten Zeile angezeigt und von oben nach unten angeordnet wird. Diese beiden Aussagen sind der Schlüssel zu unserer Implementierung des horizontalen Navigationsmenüs für ungeordnete Listen.
#nav li a und #nav li a:hover definieren den Stil des Links. Ich werde nicht näher auf den Inhalt eingehen. Das Einzige, worüber ich sprechen möchte, ist: padding: 7px 10px; es wird verwendet, um den Leerraum zwischen Linktext zu steuern und es auszuprobieren.