您的位置:首页 > web前端关注, 网页制作相关 > CSS实现视觉标识

CSS实现视觉标识

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: …… }

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

最终效果

代码素材下载

收藏 & 分享:分享家:Addthis中文版

相关文章

35 条评论 发表在“CSS实现视觉标识”上

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

  2. 小T 说:

    不错挺漂亮

  3. 墨白 说:

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

  4. 羽中 说:

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

  5. nobird 说:

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

  6. itbulu 说:

    细节的收集整理。

  7. Sawyer 说:

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

  8. 说:

    不是静态页呢…

  9. 百学山 说:

    过来学习了

  10. SEO培训 说:

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

  11. hiro 说:

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

  12. whisperer 说:

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

  13. wuleilei 说:

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

  14. 万戈 说:

    呵呵,我就是用JS的

  15. feicun 说:

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

留言内容可以体现一个人的个性和态度! ---> Just do it...

* (必填)

< Ctrl + Enter >

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。
click to changeSecurity Code