|
购物专题 | 基金专题 | 性专题 | 饮食专题 | 教育专题 | 生活大参考 | 园林资讯 | 园艺库 | 健康专题 | |
| 论文专题 | 家庭养花 | 园林景观 | 盆景奇石 | 激情图库 | 农业资料库 | 园林古建 | 英文站 | 花卉栽培 |
链接文字的上划线、下划线、删除线（贯穿线）、闪烁等可以通过CSS的text-decoration属性来实现
。其属性值与效果相对应的关系如下：
text-decoration:
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 删除线（贯穿线）
overline : 上划线
更详细的text-decoration介绍请参考这里。
学习了此属性的一些用法，我们不难看出，链接文字上划线、下划线同时出现可以通过：text-
decoration: underline overline，即可以实现了。或许你有疑问，这两个属性值可以同时了现吗？答案
是肯定的，是可以实现的，我们看下面的运行效果：
<!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.IT130.cn</title>
<style type="text/css">
<!--
a.textb {
text-decoration:none;
color:#c00;
}
a.textb:hover {
text-decoration : underline overline;
color:#00f;
}
-->
</style>
</head>
<body>
<a href="http://www.IT130.cn/" class="textb">www.IT130.cn</a>
</p>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
看到效果了吧，虽然我们实现了链接文字上划线、下划线同时出现。但还有很多细节我们并不满意。
一、线型单一，只是实线；二、颜色不可更改（默认的线条颜色为链接文字的颜色）；三、距离文字的边
距不可控制，感觉离文字太近了。
我们想到了更好的办法，可以去除text-decoration属性，给链接加上、下边框线，同样可以让上划
线、下划线同时出现。我们看下面的运行效果。
Source Code to Run [www.52css.com]
<!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.IT130.cn</title>
<style type="text/css">
<!--
a.texta {
display:block;
text-decoration:none;
color:#c00;
border-bottom:1px dashed #fff;
border-top:1px dashed #fff;
}
a.texta:hover {
border-bottom:1px dashed #c00;
border-top:1px dashed #c00;
color:#666;
}
-->
</style>
</head>
<body>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
</p>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
在默认情况下，块级元素的默认宽度是父级元素的宽度，并且占据一整行的页面空间。所以我们看上
面的效果，就出现了一整行都给链接所占据，我们可以作一些调整，设置链接元素为左浮动，并设置左边
距为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.IT130.cn</title>
<style type="text/css">
<!--
a.texta {
display:block;
float:left;
margin-left:30px;
text-decoration:none;
color:#c00;
border-bottom:1px dashed #fff;
border-top:1px dashed #fff;
}
a.texta:hover {
border-bottom:1px dashed #c00;
border-top:1px dashed #c00;
color:#666;
}
-->
</style>
</head>
<body>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
<a href="http://www.IT130.cn/" class="texta">www.IT130.cn</a>
</p>
</body>
</html>
当然，您也可以改变上面的CSS代码，多动手，多学习，多思考才是学习CSS的好方法！
浙ICP备 ：07003766号 Copyright © 2001-2007 JUBAO163,All rights reserved. |
