视觉标识这个词挺新鲜的哈,其实很简单就像上图中箭头指出的一样:当你在网站的博客页面时会有一个橘色的标识。这个效果的最大优点就是提示用户以提高用户体验。一般来说这效果都是用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: …… }
其实这个效果挺简单的,有兴趣的同学可以去试试。

DIV+CSS的导航菜单灵活多变
不错挺漂亮
我想请教你一些关于js代码的一些问题。
如何实现
http://www.mockte.com/file200901/AnnotationTool_av1.rar
这个里面的功能?
我研究了很久,无果,特意请教。。。
p.s.我是菜鸟
Gtalk:chenglu99#gmail.com
Q:337807460
@墨白 呵呵。真不好意思,JS我也是菜鸟啊。我看这视频效果应该是和fckeditor一样吧,主要就是对文档的编辑。JS做起来也就是对DOM的一系列操作吧。具体我也搞不清楚啊。
仍然感谢你,哈哈,你用小张的主机?
@墨白 呵呵.是啊,小张的主机不错的说.
小张是我的学长,我们一个学校的,嘻嘻~
@墨白 呵呵.那敢情好,买空间方便哈.
哈哈,是啊,他现在做的很大很不错,不过也很忙平时,哈哈
很实用的技术,我现在是着迷用js实现了呵呵。元旦快乐!
@羽中 呵呵。JS比较灵活,实现起来也方便。
新年快乐
我记得我留言过了…怎么没了…–
@nobird 不会吧,这篇貌似还没留言过吧!
细节的收集整理。
@itbulu 呵呵。对了,好的设计都是注重细节的。
我下载了,留着以后用吧,效果不错的说,呵呵~
@Sawyer 呵呵。谢谢了,不过我写的这代码还没在IE6下测试,不知道兼容性好不好,我的IE tester不知道怎么回事不能本地调试!
刚看过了IE6下还是不错的。可能是用图片的缘故吧!
不是静态页呢…
@安 全是静态页呀!
打错字了==
如果是动态的呢
@安 动态的话应该不用建立那么多页面,在JS里面判断一下给个样式就行了。
过来学习了
博主用的是什么模板啊?真好看,支持你
其实就是着重强调当前操作的页面!
@hiro 呵呵。其实就是这意思。
这个 用border-bottom不是更简单么
或者用图片,可以写到一起啊
@whisperer 因为要把文字做成图片所以就直接用sprites连接在一起做了。
效果不错,代码也简单~~
呵呵,我就是用JS的
@万戈 JS实现也挺简单而且方便加些效果。
这个效果实现的话确实挺简单的,用JS可以做的更动态一些吧
@feicun JS就能做得更漂亮点,柔和点。