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

來源:互聯網
上載者:User
這篇文章主要介紹了關於利用CSS在導航條上標示當前所在頻道,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

網頁製作Webjx文章簡介:利用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 {……}

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關推薦:

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.