So richten Sie eine horizontale Navigationsstruktur in HTML ein-HTML-Tutorial-php.cn

So richten Sie eine horizontale Navigationsstruktur in HTML ein

高洛峰

Freigeben： 2017-02-21 13:36:06

Original

1859 Leute haben es durchsucht

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 Linie mit anderen Elementen. Inline-Elemente können in anderen Elementen verschachtelt werden.

Gemeinsame Blockelemente umfassen 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, damit eine Blockstruktur die Eigenschaften eines Inline-Elements hat oder damit ein Inline-Element die Eigenschaften eines Blockelements hat. 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 Tag „a“ schöner zu machen, 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, hoffen wir, dass jede Zeile der Liste in derselben Zeile angezeigt werden kann. Zu diesem Zeitpunkt können wir auch kombinieren Die Blockstruktur und die Inline-Struktur erreichen diesen Zweck.

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

Methode 2 Verwenden Sie die Float-Attributeinstellung.

Das Float-Attribut 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:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title></title>  
    <style type="text/css">  
        ul{   
            float:right;   
        }   
        li{   
            padding-right:30px;   
            float:left;   
        }   
        a{   
            margin-left:20px;   
            font-size:20px;   
            font-weight:bold;   
            color:white;   
            display:block;   
            border:1px solid black;   
            width:100px;   
            text-decoration:none;   
            text-align:center;   
            background-color:darkseagreen;   
        }   
        a:hover{   
            color:red;   
        }   
    </style>  
</head>  
<body>  
<ul>  
    <li>导航一</li>  
    <li>导航二</li>  
    <li>导航三</li>  
</ul>  
  
<a href="#">百度</a>  
</body>  
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Weitere Artikel zum Einrichten einer horizontalen Navigationsstruktur in HTML finden Sie auf der chinesischen PHP-Website!