手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>css>列表

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

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

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

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

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

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

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

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

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

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

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

文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!