Maison > Article > interface Web > Comment implémenter la disposition des onglets de navigation horizontale à l'aide de HTML et CSS
Comment implémenter la disposition des onglets de navigation horizontale à l'aide de HTML et CSS
- WBOYoriginal
- 2023-10-28 08:06:50947parcourir
Comment utiliser HTML et CSS pour implémenter la disposition des étiquettes de navigation horizontale
Image de couverture
De nos jours, de nombreux sites Web adoptent la disposition des étiquettes de navigation horizontale. Cette mise en page est simple et claire, facile à naviguer et à utiliser. Cet article explique comment utiliser HTML et CSS pour implémenter la disposition des étiquettes de navigation horizontale et donne des exemples de code spécifiques.
Tout d’abord, examinons la structure du code HTML. En règle générale, une disposition d'onglets de navigation horizontale se compose d'un conteneur de barre de navigation externe et de plusieurs onglets de navigation. Voici un exemple de code HTML simple :
<!DOCTYPE html>
<html>
<head>
<title>水平导航标签布局</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>Dans ce code HTML, nous créons un élément div appelé "navbar" et y imbriquons une liste non ordonnée. Chaque élément de liste (élément li) contient un lien de navigation (un élément).
Ensuite, jetons un œil au style du code CSS. En CSS, nous pouvons utiliser "display: inline-block;" pour obtenir l'effet d'arrangement horizontal. Voici un exemple de code CSS simple :
.navbar {
background-color: #f1f1f1;
padding: 10px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
.navbar li a {
text-decoration: none;
color: #333;
padding: 5px 10px;
}
.navbar li a:hover {
background-color: #333;
color: #fff;
}Dans ce code CSS, nous définissons d'abord la couleur d'arrière-plan et le remplissage du conteneur de la barre de navigation (.navbar). Ensuite, nous avons effectué certains paramètres de style sur la liste non ordonnée (ul), notamment en supprimant le style par défaut des éléments de la liste et en organisant les éléments de la liste horizontalement.
Les paramètres de style pour les liens de navigation (éléments a) incluent la suppression des soulignements, la définition de la couleur du texte et du remplissage.
Enfin, nous définissons la couleur d'arrière-plan et la couleur du texte pour l'état de survol du lien de navigation afin d'améliorer l'expérience utilisateur.
Maintenant, nous pouvons implémenter une simple disposition d'étiquettes de navigation horizontale en combinant le code HTML et CSS. En ajustant les styles dans le code CSS, nous pouvons également concevoir et personnaliser davantage selon nos besoins.
Résumé :
Cet article présente comment implémenter la disposition des étiquettes de navigation horizontale à l'aide de HTML et CSS. La disposition des onglets de navigation horizontale est une disposition simple et claire, facile à naviguer et à utiliser. En utilisant l'attribut display: inline-block;, nous pouvons facilement obtenir un effet d'arrangement horizontal. Dans le même temps, nous fournissons également des exemples de codes HTML et CSS spécifiques, dans l'espoir de vous aider lors de la mise en œuvre de la disposition des étiquettes de navigation horizontale.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!