我们要做的是未被点击时超链接文字无下划线,显示为灰色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为黄色。
我们来看完整的实验代码:
<html> <head> <title>编程之家:取消下划线实例</title> <style> a:link{text-decoration: none;color: gray} a:active{text-decoration:blink} a:hover{text-decoration:underline;color: red} a:visited{text-decoration: none;color: yellow} </style> </head> <body> 欢迎来到<a href=www.jb51.cc>编程之家网</a> </body> </html>
效果图有三个:
这个是未被点击的样子,无下划线,显示为灰色。
这个是鼠标一上去的样式,有下划线,显示为红色。
这个是被点击之后的样式,无下划线,显示为黄色文本。