超链接下划线的小把戏

如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单,你也可以做到。
来这里看看实际效果 http://5key.net/demo/hyperlink-underline 

超链接下划线的小把戏
首先,我们来说说这个彩色的下划线是怎么弄的。也许你已经猜到了,一张渐变的背景图片。没错!就是下面这张图片。

再看看下面的css,整个链接的变化效果我想你应该已经明白了吧。
如果不是太清楚。先来了解一下滑动门的概念

下载: link.css
  1. body {
  2.     font-size:14px;
  3.     font-family: Helvetica, sans-serif;
  4.     padding:10px;
  5.     margin:0px;
  6. }
  7. h1{margin:0padding:0font-size:16px}
  8. p{padding:20px 0 0 0;}
  9. a{
  10.     *padding-bottom:1px;
  11.     text-decoration:none;
  12.     }
  13. a:link{
  14.     color:#06F;
  15.     background: url(1.gif);
  16.     background-repeat: repeat-x;
  17.     background-position: 0 16px;
  18. }
  19. a:visited{
  20.     color:#06f;
  21.     background-image: url(1.gif);
  22.     background-repeat: repeat-x;
  23.     background-position: 0 16px;
  24. }
  25. a:hover{
  26.     color:#039;
  27.     background:url(1.gif)  repeat-x 0 bottom;
  28. }

Random Posts

17 条评论 发表在“超链接下划线的小把戏”上

  1. 乌龙球 说到:

    还是那么一点基本语法,就看怎么用脑子去想点子,怎么去用了 [yes] [yes]

    [回复]

  2. 愆伏 说到:

    貌似FF下显示的效果很诡异

    [回复]

  3. dowhatyouwant 说到:

    刚才的写法忽略了点小问题。现在搞定~ [lol]

    [回复]

  4. 空格 说到:

    吓我一跳,呵呵

    [回复]

  5. aoao 说到:

    其实彩虹线做一条就条...
    a:link时background:url(1.gif) repeat-x 0 bottom;
    a:hover 时background:url(1.gif) repeat-x 120px bottom;
    彩虹线两端最近能连起来.这样在长文字时连会比较好看.这样也能解决文字放大后彩虹线错位的问题.

    =.= 这个办法在IE还有点不好的地方.就是.链接出现换行..

    [回复]

  6. aoao 说到:

    [razz] 忘记说了.我们以前是还用过别一种方式..
    两张图片..另一张会动的gif  移上去效果更好..挖哈哈.

    [回复]

  7. dowhatyouwant 说到:

    哈哈。aoao说得有道理。不过链接还是别整得太花的好。

    [回复]

  8. 稻草 说到:

    "花了"人家才去點它嘛.哈哈

    [回复]

  9. dowhatyouwant 说到:

    哈哈~~~低调,要低调….

    [回复]

  10. waasai 说到:

    为了花哨的技术,WEB开发不该如此浮躁

    [回复]

  11. dowhatyouwant 说到:

    @waasai
    此贴只是针对技术。我也不会将这样的效果运用到页面中。 [cool]

    [回复]

  12. 西贝 说到:

    不仅是设计高手,着实佩服

    [回复]

  13. 生活笔谈 说到:

    这东西好玩哦~~

    [回复]

  14. comfill 说到:

    aoao的方法我用过, 普通是不动的点, hover状态就让它跑起来, 比这个有趣, 呵呵

    [回复]

  15. i0ne 说到:

    [lol] 0 bottom这样写不合适

    标准的:0 100%

    [回复]

  16. unicac 说到:

    用到的时候。。挺实用的!

    [回复]

  17. [...] 文章地址:http://5key.net/blog/index.php/2007/10/29/hyperlink-underline/ [...]

留下回复