suchen

Heim  >  Artikel  >  Web-Frontend  >  So richten Sie eine horizontale Navigationsstruktur bei der Erstellung von Html_HTML/Xhtml_Webseiten ein

So richten Sie eine horizontale Navigationsstruktur bei der Erstellung von Html_HTML/Xhtml_Webseiten ein

WBOY
WBOYOriginal
2016-05-16 16:36:032794Durchsuche

In diesem Artikel stellen wir Ihnen zwei Methoden zum Einrichten horizontaler Navigationsstrukturen vor, hauptsächlich mithilfe von Listenstrukturen.

Methode 1: Kombination aus Blockstruktur und 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 Rand (Rand) festlegen. Inline-Elemente können nur die Zeilenhöhe sowie den linken und rechten Rand festlegen, verfügen jedoch nicht über Attribute wie äußere Ränder, oberen und unteren Abstand und Rahmen.

(2) Die Blockstruktur ist prägnanter und teilt keine Reihe mit anderen Elementen. Inline-Elemente können in anderen Elementen verschachtelt werden.

Gemeinsame Blockelemente sind ul, ol, p, form usw. Zu den gängigen Inline-Elementen gehören Meta, IMG, Span, H1-H6, Label usw.

Aber manchmal werden beide kombiniert, um einer Blockstruktur die Eigenschaften eines Inline-Elements oder einem Inline-Element die Eigenschaften eines Blockelements zu verleihen. Hier ein Beispiel dafür, wie einem Inline-Element die Eigenschaften eines Blockelements verliehen werden: Das a-Tag ist eines der wichtigsten Inline-Tags, und Benutzer können über den angegebenen Link auf die entsprechende Seite zugreifen. Um die Elemente unter dem a-Tag schöner zu gestalten, möchten wir einige Attribute für diesen Link festlegen, darunter Rahmen, Ränder, Hintergrundfarbe usw. Wir wissen, dass diese Attribute nur Blockstrukturen besitzen. Daher möchten wir in diesem Moment nicht nur weiterhin das Inline-Tag a verwenden, um Linkinhalte unterzubringen, sondern hoffen auch, dass dieses Inline-Element auch Attribute haben kann, die sich auf Blockstrukturen beziehen.

Wir können dieses Problem durch die Einstellung von „a{display:block}“ lösen.

Wenn wir eine Liste verwenden möchten, um den Zweck der Einrichtung einer horizontalen Navigation zu erreichen, möchten wir, dass jede Zeile der Liste in derselben Zeile angezeigt wird. Zu diesem Zeitpunkt können wir dieses Ziel auch durch eine Kombination erreichen von Blockstruktur und Inline-Struktur.

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

Methode 2: Float-Attributeinstellungen verwenden.

Das Attribut float kann so eingestellt werden, dass es in zwei Richtungen schwimmt, einschließlich links und rechts. Das Einrichten der horizontalen Navigation besteht darin, die Liste horizontal nach links zu verschieben, da wir hoffen, dass die Navigationsreihenfolge nach dem Festlegen der Schweberichtung horizontal von links nach rechts erfolgt, dh von links nach rechts, Navigation eins Zur Navigation vier. Dies entspricht eher den Gewohnheiten von mehr Benutzern.

Code:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html>  
  3. <Kopf lang="en" >  
  4.     <meta charset="UTF- 8">  
  5.     <Titel>Titel>  
  6.     <Stil Typ="text/ css">  
  7.         ul{   
  8.             float:right;   
  9.         }   
  10.         li{   
  11.             padding-right:30px;   
  12.             float:left;   
  13.         }   
  14.         a{   
  15.             margin-left:20px;   
  16.             font-size:20px;   
  17.             font-weight:bold;   
  18.             Farbe: weiß;   
  19.             display:block;   
  20.             border:1px solid black;   
  21.             width:100px;   
  22.             text-decoration:none;   
  23.             text-align:center;   
  24.             Hintergrundfarbe:darkseagreen;   
  25.         }   
  26.         a:hover{   
  27.             Farbe: rot;   
  28.         }  
  29.     style>  
  30. tête>  
  31. <corps>  
  32. <ul>  
  33.     <li>导航一li>  
  34.     <li>导航二li>  
  35.     <li>导航三li>  
  36. ul>  
  37.   
  38. <a href="#" >百度a>  
  39. corps>  
  40. html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/xiaoqqmin/p/5317551.html

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der HTML-Download-Funktion_HTML/Xhtml_WebseitenproduktionNächster Artikel：Detaillierte Erläuterung der HTML-Download-Funktion_HTML/Xhtml_Webseitenproduktion

In Verbindung stehende Artikel

Mehr sehen