demo05-link.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS链接样式</title>
  6. <style>
  7. /*设置a标签链接的状态样式*/
  8. /*
  9. a标签有四种状态:
  10. 正常的,未被访问链接
  11. 用户访问过的链接
  12. 用户将鼠标悬停在链接上时
  13. 链接被点击时的状态
  14. */
  15. /*正常的,未被访问链接*/
  16. a:link{
  17. color: #000;
  18. text-decoration: none;/*删除链接的下划线*/
  19. background-color: #d7cece;
  20. }
  21. /*用户访问过的链接*/
  22. a:visited{
  23. color: #0f0;
  24. }
  25. /*用户将鼠标悬停在链接上时*/
  26. a:hover{
  27. /*color: #f00;*/
  28. background-color: #b8b1b1;
  29. }
  30. /*链接被点击时的状态*/
  31. a:active{
  32. color: #00f;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <a href="#" target="_blank">首页</a>
  38. <a href="#" target="_blank">用户管理</a>
  39. <a href="#" target="_blank">部门管理</a>
  40. <a href="#" target="_blank">账号管理</a>
  41. <a href="#" target="_blank">系统设置</a>
  42. </body>
  43. </html>