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

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.

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.

Le

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.-->

Image originale jointe lors de l'exécution 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 ) 
}

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

Je suis un débutant absolu en matière d'écriture de code HTML, donc je m'excuse si je n'ai pas fait du bon travail.

Apprentissage recommandé : Tutoriel vidéo HTML

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!