DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 利用CSS在導航條上標示當前所在頻道
利用CSS在導航條上標示當前所在頻道
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:利用CSS在導航條上標示當前所在頻道的技術,已經有很長時間了,在很多CSS的書中都介紹過,不過還是總被問到,因此寫一個簡單的示例來講解一下。

利用CSS在導航條上標示當前所在頻道的技術,已經有很長時間了,在很多CSS的書中都介紹過,不過還是總被問到,因此寫一個簡單的示例來講解一下。

其實原理非常簡單:

1) 按照不同的頻道(欄目),分別為body定義id。例如:

首頁:<body id="p_home">
Blog頻道:<body id="p_blog">
相冊頻道:<body id="p_ablum">
頻道內的所有頁面都要統一定義id。

2) 導航條的相應欄目,也定義id或者class:

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

3) 當前位置通過不同的body的id來分別:

#p_home .nav_home a,
#p_blog .nav_blog a,
#p_album .nav_album a {
……
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved