CSS实现视觉标识

发表于 2009年12月29日由 kily

css-visual-sing

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

其实这个效果挺简单的，有兴趣的同学可以去试试。

代码素材下载

《CSS实现视觉标识》上有 35 条评论

xiangxirenjingyou 在 2010年5月13日20:44 说：

DIV+CSS的导航菜单灵活多变

回复 ↓
小T 在 2010年1月3日20:06 说：

不错挺漂亮

回复 ↓
墨白在 2010年1月2日14:28 说：

我想请教你一些关于js代码的一些问题。
如何实现
http://www.mockte.com/file200901/AnnotationTool_av1.rar
这个里面的功能?
我研究了很久，无果，特意请教。。。
p.s.我是菜鸟
Gtalk：chenglu99#gmail.com
Q：337807460

回复 ↓
- kily 在 2010年1月2日15:52 说：
  
  @墨白呵呵。真不好意思，JS我也是菜鸟啊。我看这视频效果应该是和fckeditor一样吧，主要就是对文档的编辑。JS做起来也就是对DOM的一系列操作吧。具体我也搞不清楚啊。
  
  回复 ↓
  - 墨白在 2010年1月3日02:55 说：
    
    仍然感谢你，哈哈，你用小张的主机？
    
    回复 ↓
    - kily 在 2010年1月3日12:07 说：
      
      @墨白呵呵.是啊,小张的主机不错的说.
      
      回复 ↓
      - 墨白在 2010年1月3日17:23 说：
        
        小张是我的学长，我们一个学校的，嘻嘻～
    - kily 在 2010年1月3日18:45 说：
      
      @墨白呵呵．那敢情好，买空间方便哈．
      
      回复 ↓
      - 墨白在 2010年1月3日19:53 说：
        
        哈哈，是啊，他现在做的很大很不错，不过也很忙平时，哈哈
羽中在 2010年1月1日17:54 说：

很实用的技术，我现在是着迷用js实现了呵呵。元旦快乐！

回复 ↓
- kily 在 2010年1月1日21:57 说：
  
  @羽中呵呵。JS比较灵活，实现起来也方便。
  
  回复 ↓
林西老九在 2010年1月1日13:38 说：

新年快乐

回复 ↓
nobird 在 2009年12月31日21:54 说：

我记得我留言过了…怎么没了…–

回复 ↓
- kily 在 2010年1月1日10:15 说：
  
  @nobird 不会吧，这篇貌似还没留言过吧！
  
  回复 ↓
itbulu 在 2009年12月31日14:14 说：

细节的收集整理。

回复 ↓
- kily 在 2009年12月31日15:17 说：
  
  @itbulu 呵呵。对了，好的设计都是注重细节的。
  
  回复 ↓
Sawyer 在 2009年12月31日13:44 说：

我下载了，留着以后用吧，效果不错的说，呵呵~

回复 ↓
- kily 在 2009年12月31日15:19 说：
  
  @Sawyer 呵呵。谢谢了，不过我写的这代码还没在IE6下测试，不知道兼容性好不好，我的IE tester不知道怎么回事不能本地调试！
  
  回复 ↓
  - kily 在 2009年12月31日15:22 说：
    
    刚看过了IE6下还是不错的。可能是用图片的缘故吧！
    
    回复 ↓
安在 2009年12月30日22:13 说：

不是静态页呢…

回复 ↓
- kily 在 2009年12月31日15:18 说：
  
  @安全是静态页呀！
  
  回复 ↓
  - 安在 2009年12月31日15:21 说：
    
    打错字了==
    如果是动态的呢
    
    回复 ↓
    - kily 在 2009年12月31日15:23 说：
      
      @安动态的话应该不用建立那么多页面，在JS里面判断一下给个样式就行了。
      
      回复 ↓
百学山在 2009年12月30日17:21 说：

过来学习了

回复 ↓
SEO培训在 2009年12月30日16:19 说：

博主用的是什么模板啊？真好看，支持你

回复 ↓
hiro 在 2009年12月30日13:55 说：

其实就是着重强调当前操作的页面！

回复 ↓
- kily 在 2009年12月30日19:59 说：
  
  @hiro 呵呵。其实就是这意思。
  
  回复 ↓
whisperer 在 2009年12月30日10:48 说：

这个用border-bottom不是更简单么

回复 ↓
- whisperer 在 2009年12月30日10:49 说：
  
  或者用图片，可以写到一起啊
  
  回复 ↓
  - kily 在 2009年12月30日12:25 说：
    
    @whisperer 因为要把文字做成图片所以就直接用sprites连接在一起做了。
    
    回复 ↓
wuleilei 在 2009年12月30日09:42 说：

效果不错，代码也简单~~

回复 ↓
万戈在 2009年12月30日09:22 说：

呵呵，我就是用JS的

回复 ↓
- kily 在 2009年12月30日10:37 说：
  
  @万戈 JS实现也挺简单而且方便加些效果。
  
  回复 ↓
feicun 在 2009年12月30日01:28 说：

这个效果实现的话确实挺简单的，用JS可以做的更动态一些吧

回复 ↓
- kily 在 2009年12月30日10:36 说：
  
  @feicun JS就能做得更漂亮点，柔和点。
  
  回复 ↓

发表评论取消回复