-
Notifications
You must be signed in to change notification settings - Fork 0
/
css7.html
73 lines (68 loc) · 2.66 KB
/
css7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS链接</title>
<style>
<!-- 链接样式 -->
a:link {color:#ff0000;text-decoration:none;} /* unvisited link */
a:visited {color:#00ff00;text-decoration:none;} /*visited link */
a:hover {color:#ff00ff;text-decoration:underline;} /* mouse over link */
a:active {color:#0000ff;text-decoration:underline;} /* selected link */
<!-- 用于删除链接中的下划线 -->
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
<!-- 指定链接北背景色 -->
a:link {background-color:#b2ff99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#ff704d;}
a:active {background-color:#ff704d;}
<!-- 添加不同样式的超链接 -->
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline:}
<!-- 创建链接框 -->
a.pad:link,a.pad:visited
{
display:block;
font-weight:bold;
color:#ffffff;
background-color:#98bf21;
width:120px;
text-align:center;
padding:40px;
text-decoration:none;
}
a.pad:hover,a.pad:active
{
background-color:#0000ff;
}
</style>
</head>
<body>
<p><b><a href="//www.baidu.com/" target="_blank">百度链接</a></b></p>
<p><b>注意:</b>a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果.</p>
<p><b>注意:</b>a:active 必须在 a:hover 之后。</p>
<h2>将鼠标移至链接上改变样式:</h2>
<p><b><a class="one" href="//www.baidu.com" target="_blank">this link changes color</a></b></p>
<p><b><a class="two" href="//www.baidu.com/" target="_blank">this link changes font-size</a></b></p>
<p><b><a class="three" href="//www.baidu.com/" target="_blank">this link changes background-color</a></b></p>
<p><b><a class="four" href="//www.baidu.com/" target="_blank">this link changes font-family</a></b></p>
<p><b><a class="five" href="//www.baidu.com" target="_blank">this link changes text-decoration</a></b></p>
<a class="pad" href="//www.baidu.com" target="_blank">this is a link</a>
</body>
</html>