menu d'implémentation CSS

Cet article explique comment utiliser CSS pour implémenter un menu simple. CSS (Cascading Style Sheets) est un langage de style présenté et affiché sur les pages Web. Sa fonction principale est d'ajouter du style et de la mise en page aux documents HTML. Dans cet exemple de menu, nous utiliserons CSS pour contrôler le style et la disposition du menu.

Tout d'abord, nous devons établir la structure HTML, comprenant un élément

Ces éléments constitueront notre menu, chaque élément
• Par exemple :

  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

  Copier après la connexion

  La structure HTML ci-dessus générera le menu suivant :

  

  Ensuite, nous utilisons CSS pour ajouter des styles au menu.

  Tout d'abord, nous définissons quelques styles de base pour l'élément

   :

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  Copier après la connexion

  Cela empêchera la liste de menu d'afficher les points par défaut, ainsi que de supprimer les marges et le remplissage par défaut.

  Ensuite, nous ajoutons des styles à chaque élément de menu et les disposons sur une ligne à l'aide de l'attribut float :

  li {
    float: left;
  }
  
  li a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }

  Copier après la connexion

  Cela alignera chaque élément de menu sur une ligne dans la barre de menu et ajoutera les styles, par exemple, Turn le lien dans un élément de bloc, définissez le remplissage, la décoration du texte, ainsi que la couleur et la police.

  Enfin, nous appliquerons quelques styles à la barre de menus :

  nav {
    background-color: #f1f1f1;
  }
  
  nav ul {
    overflow: auto;
    width: 100%;
  }
  
  nav li {
    float: left;
  }
  
  nav a {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }
  
  nav a:hover {
    background-color: #ddd;
    color: #333;
  }

  Copier après la connexion

  Nous utilisons la propriété background-color pour définir la couleur d'arrière-plan de la barre de menus, et la propriété overflow pour rendre la barre de menus défilante. De plus, nous définissons les styles d’arrière-plan et de survol des éléments de menu.

  Enfin, notre menu CSS implémenté ressemble à ceci :

  

  Grâce aux étapes ci-dessus, nous avons implémenté un menu CSS simple. Cette méthode peut être utilisée dans différents projets, et des modifications personnalisées peuvent être appliquées à différents types de sites Web. Au cours du processus de mise en œuvre, vous devez comprendre les propriétés et fonctions pertinentes du CSS et les utiliser de manière flexible pour obtenir l'effet souhaité du menu.

  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!