一.a标签的四个状态:
1.link'未访问状态
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{color: blue;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
2.visited访问过状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:visited{color: black;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
变成黑色点击不变色
3.hover鼠标经过状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:hover{color: orange;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
鼠标滑过变成橘黄色.
4.active鼠标按住状态:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:active{color: green;}
</style>
</head>
<body>
<a href="###">这是一个a标签</a>
</body>
</html>
鼠标长摁变成绿色.
二.用a标签实现跳转:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="#1F">三国演义</a>
<a href="#2F">水浒传</a>
<a href="#3F">西游记</a>
<a href="#4F">红楼梦</a>
<a href="#5F">封神演义</a>
<hr />
<a name="1F"></a>
掉蚕丝吕布
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="2F"></a>
阎婆惜
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="3F"></a>
唐僧
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="4F"></a>
林黛玉
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a name="5F"></a>
哪吒
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
点击相应的a标签实现跳转.
注:
去a标签下划线
a{
/*去除a标签下划线*/
text-decoration: none;
}