Comment configurer une structure de navigation horizontale en HTML-tutoriel HTML-php.cn

Comment configurer une structure de navigation horizontale en HTML

高洛峰

Libérer： 2017-02-21 13:36:06

original

1896 Les gens l'ont consulté

Cet article partagera avec vous deux méthodes de mise en place de structures de navigation horizontales, principalement à l'aide de structures de listes.

Méthode 1 : Combinaison d'une structure en bloc et d'une structure en ligne.

Ici, nous introduisons d'abord la différence entre les éléments de bloc et les structures en ligne.

(1) La structure du bloc peut définir des attributs tels que la hauteur de la ligne, la largeur (largeur, hauteur), la marge (marge, remplissage) et la bordure (bordure). Les éléments en ligne peuvent uniquement définir la hauteur de ligne, les marges gauche et droite, mais n'ont pas d'attributs tels que les marges extérieures, le remplissage supérieur et inférieur et les bordures.

(2) La structure de bloc est plus autoritaire et ne partage pas de ligne avec d'autres éléments. Les éléments en ligne peuvent être imbriqués dans d'autres éléments.

Les éléments de bloc courants incluent ul, ol, p, form, etc. Les éléments en ligne courants incluent méta, img, span, h1-h6, label, etc.

Mais parfois, pour qu'une structure de bloc ait les caractéristiques d'un élément en ligne, ou pour qu'un élément en ligne ait les caractéristiques d'un élément de bloc, les deux sont combinés. Pour donner un exemple de façon de faire en sorte qu'un élément en ligne ait les caractéristiques d'un élément de bloc : la balise a est l'une des balises en ligne les plus importantes, et les utilisateurs peuvent accéder à la page correspondante en fonction du lien qu'elle spécifie. Afin de rendre les éléments sous la balise a plus beaux, nous souhaitons définir certains attributs pour ce lien, notamment les bordures, les marges, la couleur d'arrière-plan, etc. Nous savons que ces attributs ne sont possédés que par les structures de blocs, donc pour le moment, nous voulons non seulement continuer à utiliser la balise en ligne a pour accueillir le contenu des liens, mais nous espérons également que cet élément en ligne pourra également avoir des attributs liés aux structures de blocs.

Nous pouvons résoudre ce problème grâce au réglage de "a{display:block}".

De même, lorsque nous souhaitons utiliser une liste pour atteindre l'objectif de configuration de la navigation horizontale, nous espérons que chaque ligne de la liste pourra être affichée sur la même ligne. la structure de bloc et la structure en ligne atteignent cet objectif.

Il suffit d'ajouter une ligne de code à la liste : list{display:inline;}

Méthode 2 : utilisez le paramètre d'attribut float.

L'attribut float peut être défini pour flotter dans deux directions, y compris gauche et droite. Configurer la navigation horizontale consiste à faire flotter la liste horizontalement vers la gauche, car nous espérons qu'après avoir défini le flottement, l'ordre de navigation sera horizontal de gauche à droite, c'est-à-dire de gauche à droite, celui de la navigation. à la navigation quatre. Ceci est plus conforme aux habitudes de plus d'utilisateurs.

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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Pour plus d'articles sur la façon de mettre en place une structure de navigation horizontale en HTML, veuillez faire attention au site Web PHP chinois !