Maison >interface Web >tutoriel HTML >Comment configurer une structure de navigation horizontale dans la production de pages Html_HTML/Xhtml_Web
Comment configurer une structure de navigation horizontale dans la production de pages Html_HTML/Xhtml_Web
- WBOYoriginal
- 2016-05-16 16:36:032810parcourir
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 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 des blocs est plus autoritaire et ne partage pas de rangée 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 paramètre "a{display:block}".
De même, lorsque nous souhaitons utiliser une liste pour atteindre l'objectif de configuration de la navigation horizontale, nous souhaitons que chaque ligne de la liste soit affichée sur la même ligne. À ce stade, nous pouvons également atteindre cet objectif grâce à une combinaison. de structure de bloc et de structure en ligne.
Il suffit d'ajouter une ligne de code à la liste : list{display:inline;}
Méthode 2 : utiliser les paramètres 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 :
- >
- <html>
- <head lang="fr" >
- <meta charset="UTF- 8">
- <titre>titre>
- <style type="texte/ css">
- ul{
- float:droite;
- }
- li{
- padding-right:30px;
- float:gauche;
- }
- a{
- marge gauche : 20 px ;
- taille de la police : 20 px ;
- font-weight:bold;
- couleur : blanc ;
- display:block;
- bordure : 1 px noir uni ;
- largeur : 100 px ;
- text-decoration: none;
- text-align:center;
- couleur de fond : vert d'eau foncé ;
- }
- a:hover{
- couleur : rouge ;
- }
- style>
- tête>
- <corps>
- <ul>
- <li>导航一li>
- <li>导航二li>
- <li>导航三li>
- ul>
- <a href="#" >百度a>
- corps>
- html>
以上就是本文的全部内容，希望对大家的学习有所帮助。