Comment configurer la navigation horizontale en CSS

Barre de navigation

Une utilisation compétente de la barre de navigation est très importante pour tout site Web.

En utilisant CSS, vous pouvez le transformer en une belle barre de navigation au lieu d'un menu HTML ennuyeux.

Barre de navigation = liste de liens

En tant que base HTML standard, une barre de navigation est indispensable.

La barre de navigation est essentiellement une liste de liens, donc utiliser les éléments

et
• est tout à fait logique :

  <ul>
    <li><a href="#home">主页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>

  

  Il existe deux manières de créer une barre de navigation horizontale. Utilisez des éléments de liste en ligne ou flottants.

  Les deux méthodes conviennent, mais si vous souhaitez que les liens aient la même taille, vous devez utiliser la méthode float.

  Éléments de liste en ligne

  Une façon de créer une barre de navigation horizontale consiste à spécifier l'élément,

  instance

  li{
      display:inline;
  }

  affichage :inline; - Par défaut, l'élément

• Ici, nous supprimons les nouvelles lignes avant et après chaque élément de la liste pour afficher une seule ligne.

  Éléments de liste flottante

  Dans l'exemple ci-dessus, les liens ont des largeurs différentes.

  Pour que tous les liens aient la même largeur, faites flotter l'élément

• et spécifiez la largeur de l'élément  :

  Instance

  li{
      float:left;
  }
  a{
      display:block;
      width:60px;
  }

  float:left - utiliser des diapositives d'éléments de bloc flottants les uns à côté des autres

  display:block - affiche des liens vers des éléments de bloc, rendant toute la zone de lien cliquable (pas seulement le texte), cela nous permet de spécifier la largeur

  width:60px - La largeur maximale des éléments de bloc par défaut. Nous voulons spécifier une largeur de 60 pixels

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!