当前阅读教程:CSS入门到精通 > 示例:添加不同样式的超链接 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: CSS 链接 a标签样式 | 下一篇: 示例:高级 - 创建链接框 |
代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>添加不同样式的超链接</title> <!--定义内部样式--> <style> .one:link {color:#ff0000;} .one:visited {color:#0000ff;} .one:hover {color:#ffcc00;}
.two:link {color:#ff0000;} .two:visited {color:#0000ff;} .two:hover {font-size:150%;}
.three:link {color:#ff0000;} .three:visited {color:#0000ff;} .three:hover {background:#66ff66;}
.four:link {color:#ff0000;} .four:visited {color:#0000ff;} .four:hover {font-family:Georgia, serif;}
.five:link {color:#ff0000;text-decoration:none;} .five:visited {color:#0000ff;text-decoration:none;} .five:hover {text-decoration:underline;} </style> </head> <body>
<p>将鼠标移至链接上改变样式</p> <p><a href="#" target="_blank">这个链接改变颜色</a></p> <p><a href="#" target="_blank">这个链接改变字体大小</a></p> <p><a href="#" target="_blank">这个链接改变背景颜色</a></p> <p><a href="#" target="_blank">这个链接改变字体类型</a></p> <p><a href="#" target="_blank">这个链接改变文字修饰</a></p>
</body> </html> 效果图 |
|
上一篇: CSS 链接 a标签样式 | 下一篇: 示例:高级 - 创建链接框 |