Comment implémenter une disposition de menu horizontale en utilisant HTML et CSS-tutoriel HTML-php.cn

Comment implémenter une disposition de menu horizontale en utilisant HTML et CSS

PHPz

Libérer： 2023-10-25 12:46:10

original

923 Les gens l'ont consulté

Comment implémenter une disposition de menu horizontale en utilisant HTML et CSS

Comment utiliser HTML et CSS pour implémenter une disposition de menu horizontale

Introduction :
Dans la conception Web, la disposition des menus est une méthode de disposition très courante. La disposition de menu horizontale est une méthode de mise en page classique et couramment utilisée. Cet article explique comment utiliser HTML et CSS pour implémenter une disposition de menu horizontale et fournit des exemples de code spécifiques.

1. Conception de la structure HTML

Avant de mettre en œuvre la disposition du menu horizontal, nous devons créer une structure HTML appropriée. Voici un exemple de structure HTML de base :

<div class="menu">
  <ul>
    <li><a href="#">菜单项 1</a></li>
    <li><a href="#">菜单项 2</a></li>
    <li><a href="#">菜单项 3</a></li>
    <li><a href="#">菜单项 4</a></li>
  </ul>
</div>

Copier après la connexion

2. Style CSS

Tout d'abord, définissez le style du conteneur de menu, en définissant la largeur et l'alignement central :

.menu {
  width: 100%;
  text-align: center;
}

Copier après la connexion

Ensuite, définissez le style des éléments de menu. , en les alignant Afficher sur une seule ligne, annuler le style de liste par défaut, définir l'espacement et le style de police :

.menu ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li {
  display: inline-block;
  margin: 0 10px;
}

.menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

Copier après la connexion

Enfin, définir le style de survol des éléments de menu :

.menu ul li a:hover {
  color: #ff0000;
}

Copier après la connexion

3. Exemple de code complet

<!DOCTYPE html>
<html>

<head>
  <title>水平菜单布局示例</title>
  <style>
    .menu {
      width: 100%;
      text-align: center;
    }

    .menu ul {
      display: inline-block;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .menu ul li {
      display: inline-block;
      margin: 0 10px;
    }

    .menu ul li a {
      text-decoration: none;
      color: #333;
      font-size: 16px;
    }

    .menu ul li a:hover {
      color: #ff0000;
    }
  </style>
</head>

<body>
  <div class="menu">
    <ul>
      <li><a href="#">菜单项 1</a></li>
      <li><a href="#">菜单项 2</a></li>
      <li><a href="#">菜单项 3</a></li>
      <li><a href="#">菜单项 4</a></li>
    </ul>
  </div>
</body>

</html>

Copier après la connexion

4. Effet display

Enregistrez le code ci-dessus sous forme de fichier avec le suffixe .html et ouvrez-le avec un navigateur pour voir la disposition du menu horizontal implémenté. Lorsque la souris survole l'élément de menu, la couleur du texte passe au rouge, obtenant ainsi un effet interactif simple.

Conclusion :
Cet article explique comment utiliser HTML et CSS pour implémenter une disposition de menu horizontale simple. En définissant une structure HTML appropriée et en définissant les styles CSS correspondants, nous pouvons facilement obtenir une présentation d'interface belle et facile à utiliser. J'espère que cet article pourra vous être utile, merci d'avoir lu !

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!