根据主题类突出显示当前页面

一些网站的导航条,可以突出显示正在访问的页面,提示用户正在访问哪个页面。使用
css怎么做到这个呢?在cssmestery上讲了一个方法(p172),我把它记录下来。
1)使用类来标示每个页面。

<body class="home">
<body class="about">
<body class="news">

2)使用相应的ID标示链接。

<ul id="mianNav">
 
<li><href="home.htm" id="home">Home</a></li>
 
<li><href="about.htm" id="about">About</a></li>
 
<li><href="news.htm" id="news">New</a></li>
 
<li><href="interviews.htm" id="interviews">Interviews</a></li>
 
<li><href="gallery.htm" id="gallery">Gallery</a></li>
 
<li><href="carrers.htm" id="carrers">Carrers</a></li>
</ul>

3)在CSS中建立页面和特定链接的关系。

body.home #mianNav a#home {
     color: #fff;
}
body.home #mianNav a:hover#home {
     color: #000;

上面代码可以翻译成这样:寻找.home页面的中主导航条中的#home链接,其他页面也使用
相似的方法处理。


posted on 2009-11-16 13:16  ewee  阅读(232)  评论(0编辑  收藏  举报

导航