视觉标识这个词挺新鲜的哈，其实很简单就像上图中箭头指出的一样：当你在网站的博客页面时会有一个橘色的标识。这个效果的最大优点就是提示用户以提高用户体验。一般来说这效果都是用JS来完成的，但如果不牵扯动态页面的话用CSS去实现它会更容易。
首先看这个导航条的核心XHTML代码：
<body id="index-page">
<ul id="menu">
<li><a href="index.html" id="index">首页</a></li>
<li><a href="blog.html" id="blog">博客</a></li>
<li><a href="bbs.html" id="bbs">论坛</a></li>
<li><a href="guest.html" id="guest">留言</a></li>
<li><a href="links.html" id="links">链接</a></li>
</ul>
</body>
请注意红色标注部分：为了达到效果，我们建立了五个页面(index,blog,bbs,guest,linsk)，而且第个页面的body都有一个唯一的ID属性。
当我们写好样式后来实现标识效果只需要给五个不同ID选择器加上一个鼠标移动到上面去的样式：
body#index-page #index { background: …… }
body#blog-page #blog { background: ……}
body#bbs-page #bbs { background: …… }
body#guest-page #guest { background: …… }
body#links-page #links { background: …… }
其实这个效果挺简单的，有兴趣的同学可以去试试。
