So legen Sie eine horizontale Navigationsstruktur in HTML fest

In diesem Artikel werden Ihnen zwei Methoden zum Einrichten horizontaler Navigationsstrukturen vorgestellt, hauptsächlich unter Verwendung von Listenstrukturen.

Die Methode kombiniert eine Blockstruktur mit einer Inline-Struktur.

Hier stellen wir zunächst den Unterschied zwischen Blockelementen und Inline-Strukturen vor.

(1) Die Blockstruktur kann Attribute wie Zeilenhöhe, Breite (Breite, Höhe), Rand (Rand, Polsterung) und Rahmen festlegen. Inline-Elemente können nur die Zeilenhöhe sowie den linken und rechten Rand festlegen, verfügen jedoch nicht über Attribute wie Ränder, obere und untere Polsterung und Rahmen.

(2) Die Blockstruktur ist dominanter und teilt sich keine Zeile mit anderen Elementen. Inline-Elemente können in anderen Elementen verschachtelt werden.

Zu den üblichen Blockelementen gehören ul, ol, p, form usw. Zu den üblichen Inline-Elementen zählen „Meta“, „Img“, „Span“, „H1–H6“, „Label“ usw.

Manchmal werden jedoch beide kombiniert, um der Blockstruktur die Eigenschaften von Inline-Elementen zu verleihen oder um den Inline-Elementen die Eigenschaften von Blockelementen zu verleihen. Nehmen wir ein Beispiel dafür, wie man einem Inline-Element Blockelement-Eigenschaften verleiht: Das a-Tag ist eines der wichtigsten Inline-Tags. Benutzer können über den darin angegebenen Link auf die entsprechende Seite zugreifen. Um die Elemente unter dem A-Tag schöner zu gestalten, möchten wir für diesen Link einige Attribute festlegen, darunter Ränder, Abstände, Hintergrundfarben usw. Wir wissen, dass diese Attribute nur für Blockstrukturen verfügbar sind, deshalb möchten wir im Moment weiterhin das Inline-Tag a verwenden, um den Linkinhalt unterzubringen, hoffen aber auch, dass dieses Inline-Element auch die relevanten Attribute der Blockstruktur haben kann.

Wir können dieses Problem lösen, indem wir "a{display:block}" setzen.

Wenn wir eine Liste verwenden möchten, um eine horizontale Navigation einzurichten, hoffen wir, dass jede Zeile der Liste in derselben Zeile angezeigt werden kann. Zu diesem Zeitpunkt können wir dieses Ziel auch erreichen, indem wir die Blockstruktur mit der Inline-Struktur kombinieren.

Wir müssen der Liste nur eine Codezeile hinzufügen: list{display:inline;}

Methode 2 verwendet die Float-Attributeinstellung.

Das Float-Attribut kann so eingestellt werden, dass es in zwei Richtungen schwebt, nämlich nach links und nach rechts. Um die horizontale Navigation einzustellen, lassen wir die Liste horizontal nach links schweben. Wir lassen sie nach links schweben, weil wir hoffen, dass nach dem Einstellen des Schwebens die Navigationsreihenfolge horizontal von links nach rechts verläuft, d. h. von links nach rechts von Navigation eins bis Navigation vier, was den Gewohnheiten der meisten Benutzer besser entspricht.

Code:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

Originaltext: http://www.cnblogs.com/xiaoqqmin/p/5317551.html