巧用CSS自定义网页下划线样式

www.7dspace.com  更新日期：2005-8-16 2:44:33  七度空间

　　好了，把上面提到的这些超链接标记的CSS设定合并起来，结果如下：

　　a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

　　还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：

　　a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

　　怎么样，是不是很简单呢？在来看看一些例子和它们对应的CSS设定：

　　静态下划线

　　a#example3a {
text-decoration: none;
background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px
}

　　浮动效果下划线

　　a#example3b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}

　　a#example3b:hover {
background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%;
}

　　静态下划线

　　a#example4a {
text-decoration: none;
background: url('http://tech.tom.com/images/computer/2004/02/04/flower.gif') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px
}

浮动花朵效果下划线

　　a#example4b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}

a#example4b:hover {
background: url('http://tech.tom.com/images/computer/2004/02/04/flower.gif') repeat-x 100% 100%;
}

　　静态箭头下划线

　　a#example1a {
text-decoration: none;
background: url('http://tech.tom.com/images/computer/2004/02/04/arrow.gif') repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 5px
}

　　浮动动画箭头下划线 （这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）

　　a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}

a#example2b:hover {
background: url('http://tech.tom.com/images/computer/2004/02/04/animarrow.gif') repeat-x 100% 100%;
}

作者：  来源：tom科技 ( 责任编辑:7dspace )

【收藏此页】【打印】【关闭】