定义链接在鼠标被激活(点下去)时候的样式。操作方法如下:
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>