根据主题类突出显示当前页面
一些网站的导航条,可以突出显示正在访问的页面,提示用户正在访问哪个页面。使用
css怎么做到这个呢?在cssmestery上讲了一个方法(p172),我把它记录下来。
1)使用类来标示每个页面。
<body class="home">
<body class="about">
<body class="news">
2)使用相应的ID标示链接。
<ul id="mianNav">
<li><a href="home.htm" id="home">Home</a></li>
<li><a href="about.htm" id="about">About</a></li>
<li><a href="news.htm" id="news">New</a></li>
<li><a href="interviews.htm" id="interviews">Interviews</a></li>
<li><a href="gallery.htm" id="gallery">Gallery</a></li>
<li><a href="carrers.htm" id="carrers">Carrers</a></li>
</ul>
<li><a href="home.htm" id="home">Home</a></li>
<li><a href="about.htm" id="about">About</a></li>
<li><a href="news.htm" id="news">New</a></li>
<li><a href="interviews.htm" id="interviews">Interviews</a></li>
<li><a href="gallery.htm" id="gallery">Gallery</a></li>
<li><a 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;
}
color: #fff;
}
body.home #mianNav a:hover#home {
color: #000;
}
上面代码可以翻译成这样:寻找.home页面的中主导航条中的#home链接,其他页面也使用
相似的方法处理。