首页 > > 网页制作 > css >

CSS网页技巧：实现超级链接文字上划线和下划线

2008-02-23 08:43:46来源：互联网阅读 ()

　　链接文字的上划线、下划线、删除线（贯穿线）、闪烁等可以通过CSS的text-decoration属性来实现。其属性值与效果相对应的关系如下：

text-decoration:
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　删除线（贯穿线）
overline : 　上划线

　　学习了此属性的一些用法，我们不难看出，链接文字上划线、下划线同时出现可以通过：text-decoration: underline overline，即可以实现了。或许你有疑问，这两个属性值可以同时了现吗？答案是肯定的，是可以实现的，我们看下面的运行效果：

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

　　看到效果了吧，虽然我们实现了链接文字上划线、下划线同时出现。但还有很多细节我们并不满意。一、线型单一，只是实线；二、颜色不可更改（默认的线条颜色为链接文字的颜色）；三、距离文字的边距不可控制，感觉离文字太近了。

　　我们想到了更好的办法，可以去除text-decoration属性，给链接加上、下边框线，同样可以让上划线、下划线同时出现。我们看下面的运行效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.webjx.com</title> <style type="text/css">  </style> </head> <body> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> </p> </body> </html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

　　在默认情况下，块级元素的默认宽度是父级元素的宽度，并且占据一整行的页面空间。所以我们看上面的效果，就出现了一整行都给链接所占据，我们可以作一些调整，设置链接元素为左浮动，并设置左边距为30px。我们来看看效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.webjx.com</title> <style type="text/css">  </style> </head> <body> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> <a href="http://www.webjx.com/" class="texta">www.webjx.com</a> </p> </body> </html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有