Comment utiliser HTML pour créer une barre de navigation simple et esthétique (explication détaillée du code)-tutoriel HTML-php.cn

Comment utiliser HTML pour créer une barre de navigation simple et esthétique (explication détaillée du code)

奋力向前

Libérer： 2021-07-28 22:01:23

original

14730 Les gens l'ont consulté

Dans l'article précédent "Conseils CSS : Comment ajouter des masques aux images (Partager)", je vous ai présenté comment utiliser CSS pour ajouter des masques aux images. L'article suivant vous présentera comment créer une barre de navigation simple et belle en HTML. Voyons comment le faire ensemble. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Comment utiliser HTML pour créer une barre de navigation simple et esthétique (explication détaillée du code)

J'ai commencé à le lire il y a quelques mois après avoir appris les bases il y a quelques temps (et les avoir vite oubliées). J'ai commencé à créer mes propres pages Web pour tester et améliorer mes compétences, mais j'ai du mal à afficher correctement la barre de navigation.

code HTML de ma barre de navigation est le suivant :

<div class="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="#">Home</a></li>
        <li class="nav"><a class="nav" href="#">Coffee</a></li>
        <li class="nav"><a class="nav" href="#">Food</a></li>
        <li class="nav"><a class="nav" href="#">Catering</a></li>
        <li class="nav"><a class="nav" href="#">About</a></li>
        <li class="nav"><a class="nav" href="#">Contact</a></li>
    </ul>
</div>
<!--Navigation bar.-->

Copier après la connexion

Image originale jointe lors de l'exécution du code :

Comment utiliser HTML pour créer une barre de navigation simple et esthétique (explication détaillée du code)

L'effet du HTML avec exemple de code attaché au squelette de navigation

<nav>
    <ul class="navbar">
        <li class="nav-item selected"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Coffee</a></li>
        <li class="nav-item"><a href="#">Food</a></li>
        <li class="nav-item"><a href="#">Catering</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

<style>
nav{
   position:fixed;
}

.nav-item{
   color: #000;
   border: 1px solid blue;
   background-color: rgba(255, 255, 255, .6 ) 
}

.nav-item:hover
{
        background-color: rgba(0, 255, 255, .6 ) 
}

.selected{
   color: #058;
   border: 1px solid red;
   background-color: rgba(255, 0, 255, .6 ) 
}

Copier après la connexion

Image de rendu ci-joint lorsque le code s'exécute :

Comment utiliser HTML pour créer une barre de navigation simple et esthétique (explication détaillée du code)