乔丹:“我可以接受失败,但不能接受放弃!”

用CSS控制文本链接的下划线距离

上一篇 / 下一篇  2007-05-31 15:36:01 / 个人分类:工作学习

本来公司网站的链接文本的下划线都被我取消了,但领导说要不够醒目要向新浪学习。

但在我在CSS中新加了TEXT-DECORATION: underline; 后发现下划线离文本太近了,很难看。

在分析新浪CSS代码和在百度上查找资料后,发现有两个方法可以让我自定义下划线的距离。第一种方法就是:给每个链接添加下划线的背景图片;第二种就是:让自定义边框属性中只显示底边。

代码一:

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

代码二:

A {
TEXT-DECORATION: none;
padding:0 0 6 0;
border-bottom-color:0;
border-bottom-width:1px;  
border-bottom-style:solid;  
}

第一种方法可以自定义各种花纹样式的下划线,第二章方法只是让下划线离文本稍微远一点。


TAG:

引用 删除 Guest   /   2008-12-24 11:34:59
SB的做法!
引用 删除 Guest   /   2008-12-24 11:34:15
-5
引用 删除 Guest   /   2008-10-30 22:41:45
-3
引用 删除 东北人   /   2008-10-08 07:31:13
可以看出哥们是完美主义者,呵呵.确实帮了我大忙,十分感谢,
引用 删除 Guest   /   2007-10-29 13:52:45
1
引用 删除 Guest   /   2007-09-20 16:57:37
5
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2009-01-06  
    123
45678910
11121314151617
18192021222324
25262728293031

数据统计

  • 访问量: 9591
  • 日志数: 90
  • 建立时间: 2007-05-20
  • 更新时间: 2007-08-20

RSS订阅

Open Toolbar