1. 爱易网页
  2. HTML教程
  3. 用CSS怎么实现小弟我要的功能，附源码

用CSS怎么实现小弟我要的功能，附源码

日期：2014-05-17　 浏览次数：20699 次

用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>


------解决方案--------------------
HTML code

<!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>

------解决方案--------------------


HTML code

<!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>

相关资料更多>

  1. 浏览器兼容 CSS Hack步骤
  2. CSS对div滚动条的式样设置
  3. opera,qq浏览器的奇怪有关问题
  4. CSS里面有几种元素？替换元素是什么元素？该怎么解决
  5. HTML可输可选上拉框实现的JavaScript脚本-技术转载
  6. div中data-link是什么？该怎么解决
  7. HTML 五 的自定义 data- 属性和jquery的data()方法的使用
  8. css 绝对定位(absolute)跟固定定位(fixed)
  9. 请教怎么通过连接打开一个frame并打开指定页面