首頁 > web前端 > css教學 > 利用CSS在導航條上標示目前所在頻道

利用CSS在導航條上標示目前所在頻道

不言
發布: 2018-07-02 09:52:55
原創
1775 人瀏覽過

這篇文章主要介紹了利用CSS在導航條上標示目前所在頻道,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

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

其實原理非常簡單:
1) 依照不同的頻道(欄位),分別為body定義id。例如:
首頁:
Blog頻道:
相簿頻道:
頻道內的所有頁面都要統一定義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 {
……
}
登入後複製

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

關於jQuery瀏覽器CSS3特寫相容的介紹

以上是利用CSS在導航條上標示目前所在頻道的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板