在这里我设置了表格里的文字设置链接,然后设置:
链接刚开始的文字颜色:黑色
链接刚开始的背景颜色:绿色
鼠标悬停时文字颜色:蓝色(背景颜色不变)
点击链接时文字颜色:红色
点击链接时背景颜色:蓝色
链接访问过之后文字颜色:紫色
然后又重新设置了一下链接访问过的背景颜色,因为如果不设置背景颜色,就会恢复成默认的白色,这里是将背景颜色设置成了最开始的背景颜色
<!DOCTYPE html> <html> <head> <style> /*link:链接正常的样式;*/ a:link{ display:block; width: 100px; color:black; background-color:green; text-align:center; font-weight: bold; text-decoration: none;/*不显示下划线*/ } /*鼠标悬停的样式*/ a:hover{ color:blue; text-align:center; text-decoration: none; } /*鼠标点击的样式*/ a:active{ color:red; background-color:blue; text-align:center; text-decoration: none; } /*链接访问过的样式*/ a:visited{ text-align:center; color:purple; background-color:green;/*因为如果不设置背景颜色,就会恢复成默认的白色,这里是将背景颜色设置成了最开始的背景颜色*/ text-decoration: none; } </style> </head> <body> <table> <tr> //以下设置均为空标签,主要观看颜色变化比较方便 <td><a href="#">标签一</a></td> <td><a href="#">标签二</a></td> <td><a href="#">标签三</a></td> <td><a href="#">标签四</a></td> <td><a href="#">标签五</a></td> <td><a href="#">标签六</a></td> </tr> </table> </body> </html>
复制
遇到的问题:
运行html文件后,悬浮和点击链接时没有颜色变化
可以检查一下这四个样式设置的顺序,在最开始我将a:link放在了最后,当我将a:link放在了最开始的时候就正确了
点击一个链接之后,返回网页,所有的链接都变成已访问过的颜色
是不是在测试的效果的时候都点过所有的链接,这里浏览器会有缓存记录,可以换一个浏览器试试