用CSS如何实现我要的功能,附源码。
点击我是第一行时,背景颜色改变为其它颜色。
<!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" />
<title>www.css3maker.com</title>
<style type="text/css">
.classname { border:solid 1px #808080; text-align:left; background:#FFFFFF; padding:10px 0px 10px 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
</style>
</head>
<body bgcolor="#F5F5F5">
<div class="classname">
;"><a href=""><div style="padding:0px 5px 0px 5px我是第一行</div></a>
<div style="border-bottom:1px solid #808080;height:1px;padding:5px 5px 5px 5px;"></div>
<div style="padding:5px 5px 5px 5px;">我是第二行</div>
<div style="border-bottom:1px solid #808080;height:1px;padding:5px 5px 5px 5px;"></div>
<div style="padding:5px 5px 5px 5px;">我是第三行</div>
</div>
</body>
</html>
[解决办法]
<!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" /><title>www.css3maker.com</title><style type="text/css">.classname { border:solid 1px #808080; text-align:left; background:#FFFFFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}</style></head><body bgcolor="#F5F5F5"><div class="classname"><div style=" height:40px; line-height:40px;border-bottom:solid 1px #808080; " onclick="this.style.background='#ff0000'"><a href="#">我是第一行</a></div><div style="padding:5px 5px 5px 5px;">我是第二行</div><div style="border-bottom:1px solid #808080;height:1px;padding:5px 5px 5px 5px;"></div><div style="padding:5px 5px 5px 5px;">我是第三行</div></div></body></html>
[解决办法]
<!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" /><title>www.css3maker.com</title><style type="text/css">.classname { border:solid 1px #808080; text-align:left; background:#FFFFFF; padding:10px 0px 10px 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}</style></head><body bgcolor="#F5F5F5"><div class="classname"><div style="padding:0px 5px 0px 5px;" id="first" [color=#FF0000]onclick="javascript:this.style.background='red';">[/color]我是第一行</div><div style="border-bottom:1px solid #808080;height:1px;padding:5px 5px 5px 5px;"></div><div style="padding:5px 5px 5px 5px;">我是第二行</div><div style="border-bottom:1px solid #808080;height:1px;padding:5px 5px 5px 5px;"></div><div style="padding:5px 5px 5px 5px;">我是第三行</div></div></body></html>