1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>form</title>
5 <style type="text/css">
6 body {
7 margin: 0;
8 padding: 0;
9 }
10 a {
11 display: block;
12 background-color: chocolate;
13 text-decoration: none;
14 width: 120px;
15 padding: 10px;
16 margin: 2px;
17 }
18
19 a:link {
20 background-color: #ffffff;
21 }
22 a:visited {
23 background-color: darkorchid;
24 }
25 a:hover {
26 background-color: yellow;
27 }
28 a:active {
29 color: red;
30 background-color: darkgreen;
31 }
32 </style>
33 </head>
34 <body>
35 <nav>
36 <a href="https://www.dogedoge.com/" target="_blank">导航菜单栏</a>
37 <a href="">iframe嵌套</a>
38 <a href="">div居中</a>
39 <a href="">form表单应用</a>
40 <a href="https://www.dogedoge.com/" target="_blank">导航菜单栏</a>
41 <a href="">iframe嵌套</a>
42 <a href="">div居中</a>
43 <a href="">form表单应用</a>
44 </nav>
45 </body>
46 </html>
a链接的四种状态
正确的顺序：a:link、a:visited、a:hover、a:active .一般使用a:hover就行
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
a:hover定义一定要放在a:link、a:visited的后面！