Utilisez CSS pour marquer la chaîne actuelle sur la barre de navigation

Cet article présente principalement l'utilisation du CSS pour marquer la chaîne actuelle sur la barre de navigation. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Introduction à. Article Webjx sur la production de pages Web : La technologie consistant à utiliser CSS pour marquer le canal actuel sur la barre de navigation existe depuis longtemps. Elle a été introduite dans de nombreux livres CSS, mais elle est toujours posée, j'ai donc écrit un simple. exemple pour l'expliquer.

En fait, le principe est très simple :
1) Selon différents canaux (colonnes), définir respectivement les identifiants des corps. Par exemple :
Page d'accueil :
Chaîne de blog :
Chaîne d'album : Toutes les pages de la chaîne doivent avoir des identifiants définis de manière uniforme.
2) La colonne correspondante de la barre de navigation définit également l'identifiant ou la classe :

<ul id="nav">
<li class="nav_home"><a href="index.html">首页</a></li>
<li class="nav_blog"><a href="blog.html">Blog</a></li>
<li class="nav_album"><a href="album.html">相册</a></li>
</ul></p>
<p style="text-align: left;">3) La position actuelle se distingue par différents identifiants de corps : </p>
<pre class="brush:php;toolbar:false">#p_home .nav_home a,
#p_blog .nav_blog a,
#p_album .nav_album a {
……
}

Ce qui précède Nous espérons que l'ensemble du contenu de cet article sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !

Recommandations associées :

Introduction à la compatibilité rapprochée CSS3 du navigateur jQuery

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!