5key's blog / web开发

超链接下划线的小把戏

如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单，你也可以做到。
来这里看看实际效果 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:0; padding:0; font-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

这篇文章发布于 2007年10月29日，星期一，09:58，归类于 web开发。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。

« 利用CSS框架进行高效率的站点开发 Elements
让URL有更好的阅读性 »

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

  1. 乌龙球 说到：
    2007-10-29 @ 10:48

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

    [回复]

  2. 愆伏 说到：
    2007-10-29 @ 11:52

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

    [回复]

  3. dowhatyouwant 说到：
    2007-10-29 @ 12:00

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

    [回复]

  4. 空格 说到：
    2007-10-29 @ 13:10

    吓我一跳，呵呵

    [回复]

  5. aoao 说到：
    2007-10-29 @ 14:05

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

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

    [回复]

  6. aoao 说到：
    2007-10-29 @ 14:07

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

    [回复]

  7. dowhatyouwant 说到：
    2007-10-29 @ 15:26

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

    [回复]

  8. 稻草 说到：
    2007-10-29 @ 15:41

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

    [回复]

  9. dowhatyouwant 说到：
    2007-10-29 @ 21:44

    哈哈~~~低调，要低调….

    [回复]

  10. waasai 说到：
    2007-10-30 @ 12:29

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

    [回复]

  11. dowhatyouwant 说到：
    2007-10-30 @ 12:33

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

    [回复]

  12. 西贝 说到：
    2007-10-30 @ 22:08

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

    [回复]

  13. 生活笔谈 说到：
    2007-10-30 @ 23:52

    这东西好玩哦~~

    [回复]

  14. comfill 说到：
    2007-11-01 @ 16:23

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

    [回复]

  15. i0ne 说到：
    2007-11-06 @ 00:19

    [lol] 0 bottom这样写不合适

    标准的:0 100%

    [回复]

  16. unicac 说到：
    2008-01-09 @ 09:30

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

    [回复]

  17. 5key’s blog » 2007年5key.net最受欢迎的十大文章 说到：
    2008-02-19 @ 14:07

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

留下回复