Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Verwenden Sie CSS, um den aktuellen Kanal in der Navigationsleiste zu markieren

不言
Freigeben: 2018-07-02 09:52:55
Original
1760 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Markieren des aktuellen Kanals in der Navigationsleiste vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Einführung in Webjx-Artikel zur Webseitenproduktion: Die Technologie zur Verwendung von CSS zum Markieren des aktuellen Kanals in der Navigationsleiste gibt es schon seit langem. Sie wurde in vielen CSS-Büchern eingeführt, wird aber immer noch gefragt, deshalb habe ich einen einfachen Artikel geschrieben Beispiel, um es zu erklären.

Tatsächlich ist das Prinzip sehr einfach:
1) Definieren Sie entsprechend den verschiedenen Kanälen (Spalten) jeweils IDs für den Körper. Zum Beispiel:
Startseite:
Blog-Kanal:
Album-Kanal: Alle Seiten im Kanal müssen einheitlich definierte IDs haben.
2) Die entsprechende Spalte der Navigationsleiste definiert auch die ID oder Klasse:

<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) Die aktuelle Position wird durch verschiedene Körper-IDs unterschieden: </p>
<pre class="brush:php;toolbar:false">#p_home .nav_home a,
#p_blog .nav_blog a,
#p_album .nav_album a {
……
}
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt Ich hoffe, dass dieser Artikel für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die CSS3-Nahaufnahmekompatibilität des jQuery-Browsers

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um den aktuellen Kanal in der Navigationsleiste zu markieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage