Barre de navigation CSS

Personnalisons notre propre barre de navigation.

Barre de navigation verticale :

Nous utilisons d'abord la liste comme opérateur le plus basique, puis nous ajoutons local ou externe. Le lien ressemble à celui-ci :

<ul>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
    <li><a href="http://www.php.cn">php中文网 link</a></li>
</ul>

Ensuite, nous obtiendrons cet effet :

Les barres de navigation que nous voyons généralement ne sont pas soulignées, et Il y a un point devant, et quand notre souris se déplace sur le lien, la couleur du lien changera en conséquence. C'est l'effet que nous voulons obtenir avec CSS maintenant

Tout d'abord, nous devons supprimer le point devant

ul{    list-style: none;
}

<🎜. >Ensuite, nous supprimons le soulignement (qu'il soit décoché ou cliqué), puis ajoutons une couleur d'arrière-plan, puis l'affichons sous forme de bloc :

a:link,a:visited{   text-decoration: none;   background-color: lightgray;    display: block;
}

Enfin, nous ajoutons une couleur d'arrière-plan à la barre de navigation qui change lorsque la souris passe dessus :

a:active,a:hover{    background-color: cadetblue;
}

Voici le rendu

L'effet vertical Une fois l'image terminée, parlons de la navigation horizontale bar. Il suffit de modifier le fichier CSS.

Nous devons d'abord supprimer l'effet d'affichage précédent, qui est cette phrase :

display: block;

Cependant, il nous suffit de changer le mode d'affichage dans la balise li :

li{    display: inline;
}

De cette façon, nous pouvons réaliser la barre de navigation horizontale

Nous pouvons selon nos propres préférences, définir les marges, les polices, les couleurs, etc. Nous ne les décrirons pas un par un ici

.