css中的链接---lesson7

最新推荐文章于 2022-11-09 15:49:57 发布

心之所善兮

最新推荐文章于 2022-11-09 15:49:57 发布

阅读量222

点赞数

分类专栏：我的Web前端之路

本文链接：https://blog.csdn.net/baidu_26994091/article/details/73146972

版权

我的Web前端之路专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css中的链接相关属性：

a:link

a:visited

a:hover

a:active

截图：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>无标题文档</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
	a:link {text-decoration:none;background-color:#B2FF99;}    /* 未被访问的链接 */
	a:visited {text-decoration:none;background-color:#FFFF85;} /* 已被访问的链接 */
	a:hover {text-decoration:underline;background-color:#FF704D;}   /* 鼠标指针移动到链接上 */
	a:active {text-decoration:underline;background-color:#FF704D;}  /* 正在被点击的链接 */
	
	a:link,a:visited{
		display:block;
		font-weight:bold;
		font-size:14px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#FFFFFF;
		background-color:#98bf21;
		width:120px;
		text-align:center;
		padding:4px;
		text-decoration:none;	
	}
	a:hover,a:active{
		background-color:#7A991A;	
	}
	
</style>
</head>

<body>
<p><b><a class="a_btn_normal " href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>

</body>
</html>