Comment créer une barre de navigation horizontale en CSS

Les étapes pour créer une barre de navigation horizontale à l'aide de CSS sont les suivantes : Créer une structure de navigation HTML. Appliquer les styles CSS : conteneur de mise en page : affichage : flex ; justifier-contenu : centre ; éléments de liste de styles : affichage : flex ; marge : 0 ; margin-right : 1em ; lien de style : text-decoration : aucun ; couleur : noir ; état de survol de la souris : a:hov

Comment utiliser CSS pour créer une barre de navigation horizontale

Création d'une barre de navigation horizontale est une exigence courante pour la plupart des conceptions de sites Web. En utilisant CSS, cela peut être facilement réalisé en suivant ces étapes :

Créer une structure HTML :

<code class="html"><nav>
  <ul>
    <li><a href="home.html">主页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav></code>

Appliquer le style CSS :

1. Conteneur de mise en page :

<code class="css">nav {
  display: flex;
  justify-content: center;
  align-items: center;
}</code>

• affichage : flex<.> Permet à la barre de navigation de devenir un conteneur disposé horizontalement. <code>display: flex 允许导航栏成为一个水平排列的容器。
• justify-content: center 将其内容水平居中。
• align-items: center 将其内容垂直居中。

2. 样式列表：

<code class="css">ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}</code>

• display: flex 也将列表转换为水平容器。
• list-style-type: none 去除项目符号。
• margin: 0 和 padding: 0 去除默认间距和填充。

3. 样式列表项：

<code class="css">li {
  margin-right: 1em;
}</code>

• margin-right: 1em 在每个列表项之间添加一些间距。

4. 样式链接：

<code class="css">a {
  text-decoration: none;
  color: black;
}</code>

• text-decoration: none 去除链接下划线。
• color: black 设置链接文本为黑色。

5. 鼠标悬停状态：

<code class="css">a:hover {
  color: blue;
}</code>

• a:hover
justify-content: center centre son contenu horizontalement.

align-items: center centre verticalement son contenu.

2. Liste de styles :

🎜rrreee🎜🎜display: flex convertit également la liste en un conteneur horizontal. 🎜🎜list-style-type : aucun Supprimez les puces. 🎜🎜margin : 0 et padding : 0 suppriment l'espacement et le remplissage par défaut. 🎜🎜🎜🎜3. Style des éléments de la liste : 🎜🎜rrreee🎜🎜margin-right : 1em Ajoutez un espacement entre chaque élément de la liste. 🎜🎜🎜🎜4. Lien de style : 🎜🎜rrreee🎜🎜text-decoration : aucun Supprimer le soulignement du lien. 🎜🎜color: black Définissez le texte du lien sur noir. 🎜🎜🎜🎜5. État du survol : 🎜🎜rrreee🎜🎜a:hover Définissez la couleur du texte sur bleu lorsque la souris survole le lien. 🎜🎜🎜🎜Résultat : 🎜🎜🎜Suivre ces étapes créera une barre de navigation horizontale où les éléments sont disposés horizontalement les uns par rapport aux autres, centrés sur l'écran. Le texte du lien devient bleu lorsque vous le survolez. 🎜

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!