CSS里的a:active 是干什么用的,请举例说明

html-css06

CSS里的a:active 是干什么用的,请举例说明,第1张

定义链接在鼠标被激活(点下去)时候的样式。操作方法如下:

1、新建一个html文件,命名为test.html,a标签四个不同的伪类,有不同的效果。

2、利用a标签伪类改变字体的颜色。下面代码实现了a标签的默认颜色为红色,点击链接过后,颜色变为绿色,当鼠标放在连接上显示粉红色。

3、利用a标签伪类改变字体的大小。下面代码实现了a标签的默认大小为20px,点击链接过后,大小变为40px。

4、利用a标签伪类改变链接的背景颜色。下面代码实现了a标签的默认背景颜色为红色,点击链接过后,背景颜色变为绿色。

5、利用a标签伪类改变链接的字体。下面代码实现了a标签的默认字体为Monospace,点击链接过后,字体变为Arial。

6、最后利用a标签伪类去掉连接默认的下划线。下面代码实现了a标签在任何状态下都没有下划线。

修改后的代码:

<!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/htmlcharset=gb2312" />

<title>无标题文档</title>

<style>

/*未点击项状态颜色*/

.bb{width:100px}

.bb a:link{color:#0000fftext-decoration:none}

.bb a:visited{color:#0000fftext-decoration:none}

.bb a:hover{color:#ff0000text-decoration:none}

.bb a:active{color:#0000fftext-decoration:none}

/*点击项状态颜色*/

.aa{width:100px}

.aa a:link{color:#000000text-decoration:none}

.aa a:visited{color:#000000text-decoration:none}

.aa a:hover{color:#ff0000text-decoration:none}

.aa a:active{color:#000000text-decoration:none}

</style>

</head>

<script type="text/javascript">

<!--

function changeColor(obj){

var str=document.getElementsByTagName("li")

for(var i=0i<str.lengthi++){

str[i].className="bb"

}

obj.className="aa"

}

-->

</script>

<body>

<div >

<div >

<div ><span >当前位置->会员中心</span></div>

<div ><span>欢迎您早上好! <a href="#">新消息(4)</a> <a href="#">退出系统</a></span></div>

</div>

<div >

<div>会员中心</div>

<div >基本资料管理</div>

<div id="aaa">

<ul>

<li id="cc" class="aa" onClick="changeColor(this)" ><a href="#">基本资料完善</a></li>

<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">密码修改</a></li>

<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">平台销售额</a></li>

<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">评价管理</a></li>

<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">信誉度</a></li>

<li id="cc" class="bb" onClick="changeColor(this)" ><a href="#">交易记录管理</a></li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>