参考资料
1 巧妙利用CSS自定义网页下划线样式
[url]http://www.west263.com/info/html/wangyezhizuo/css/20080225/40290.html[/url]
2 div css 下划线text-decoration
[url]http://www.divcss5.com/jiqiao/j77.html[/url]
3 拒绝单调 让网页超链接拥有多姿多彩的下划线
[url]http://www.wqxz.com/article/56/Article16486_1.htm[/url]
一 CSS代码
1 网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了.
相关解释如下:
初始化页面A标记的着色(color: #000000,去下划线: text-decoration: none)
a { color: #000000; text-decoration: none}
当你把鼠标指向链接处,才会出现下划线: text-decoration: underline
a:hover { color: #FF3300; text-decoration: underline}
2未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色.
相关解释如下:
text-decoration参数:
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
<!--指正常的未被访问过的链接:文字无下划线,显示为蓝色 -->
a:link { text-decoration: none;color: blue}
<!--指正在点的链接 -->
a:active { text-decoration:blink}
<!--指鼠标在链接上: 链接文字显示为红色-->
a:hover { text-decoration:underline;color: red}
<!--指已经访问过的链接: 链接无下划线,显示为绿色-->
a:visited { text-decoration: none;color: green}
3 设置多色样式
4定义局部样式
应用示例:
1 巧妙利用CSS自定义网页下划线样式
[url]http://www.west263.com/info/html/wangyezhizuo/css/20080225/40290.html[/url]
2 div css 下划线text-decoration
[url]http://www.divcss5.com/jiqiao/j77.html[/url]
3 拒绝单调 让网页超链接拥有多姿多彩的下划线
[url]http://www.wqxz.com/article/56/Article16486_1.htm[/url]
一 CSS代码
1 网页上的所有文字链接在浏览器中显示时没有下划线,当你把鼠标指向链接处,才会出现下划线,鼠标移掉下划线就又没有了.
<style type="text/css">
<!--
a { color: #339966; text-decoration: none}
a:hover { color: #FF3300; text-decoration: underline}
-->
</style>
相关解释如下:
初始化页面A标记的着色(color: #000000,去下划线: text-decoration: none)
a { color: #000000; text-decoration: none}
当你把鼠标指向链接处,才会出现下划线: text-decoration: underline
a:hover { color: #FF3300; text-decoration: underline}
2未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色.
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
</style>
相关解释如下:
text-decoration参数:
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
<!--指正常的未被访问过的链接:文字无下划线,显示为蓝色 -->
a:link { text-decoration: none;color: blue}
<!--指正在点的链接 -->
a:active { text-decoration:blink}
<!--指鼠标在链接上: 链接文字显示为红色-->
a:hover { text-decoration:underline;color: red}
<!--指已经访问过的链接: 链接无下划线,显示为绿色-->
a:visited { text-decoration: none;color: green}
3 设置多色样式
<style type="text/css">
<!--
a#example1a {
text-decoration: none;
background: url(images/diagonal.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 2px;
}
a#example1b:hover {
background: url(images/diagonal.gif) repeat-x 100% 100%;
}
a#example2a {
text-decoration: none;
background: url(images/flower.gif) repeat-x 100% 100%;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 10px;
}
a#example2b:hover {
background: url(images/flower.gif) repeat-x 100% 100%;
}
-->
</style>
<p>实例:</p>
<p> <a href="#" id="example1a">波纹线静态下划线</a>
<a href="#" id="example1b">鼠标停留时出现的波纹线</a>。</p>
<p> <a href="#" id="example2a">花朵静态下划线</a>
<a href="#" id="example2b">鼠标停留时出现的花朵下划线</a>。</p>
4定义局部样式
<style type="text/css">
<!--
/*全局*/
a{text-decoration:underline;} /*有下划线*/
a:hover{text-decoration:none;} /*鼠标滑过无划线*/
/*局部的*/
a.line_none{text-decoration:none;color:#cc000;} /*line_none样式名的超链接无下划线*/
a.line_none:hover{text-decoration:underline;} /*鼠标滑过出现下划线*/
-->
</style>
应用示例:
<a href="#">我是全局的超链接,所以有下划线</a>
</br></br>
<a href="#" class="line_none">我是局部局的超链接,我没有下划线</a>
</br></br></br></br>
<div class="none">我不是超链接,没有下划线</div>
<div class="line">我不是超链接,有下划线</div>