Maison > interface Web > tutoriel CSS > Créez une barre de navigation horizontale à l'aide d'éléments de liste en ligne en CSS

Créez une barre de navigation horizontale à l'aide d'éléments de liste en ligne en CSS

PHPz
Libérer: 2023-08-29 14:29:11
avant
652 Les gens l'ont consulté

使用 CSS 中的内联列表项构建水平导航栏

Créez une barre de navigation horizontale à l'aide d'éléments de liste en ligne. Définissez l'élément

  • en ligne.

    Exemple

    Vous pouvez essayer d'exécuter le code suivant pour créer une barre de navigation horizontale :

    Live Demo

    <!DOCTYPE html>
    <html>
       <head>
          <style>
             ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
             }
             .active {
                background-color: #4CAF50;
                color: white;
             }
             li {
                border-bottom: 1px solid #555;
                display: inline;
             }
          </style>
       </head>
       <body>
          <ul>
             <li><a href = "#home">Home</a></li>
             <li><a href = "#company" class="active">Company</a></li>
             <li><a href = "#product">Product</a></li>
             <li><a href = "#services">Services</a></li>
             <li><a href = "#contact">Contact</a></li>
          </ul>
       </body>
    </html>
    Copier après la connexion
  • 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!

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Tutoriels populaires
    Plus>
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal