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

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

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

用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. html file 拒绝访问异常
  2. CSS 伪种
  3. 设置图片
  4. 在器皿内使用CSS设置背景颜色
  5. 关于li占位有关问题
  6. lightbox 从网下上载的都是图片 ，但文字形式而用不了，请各位援助一上
  7. 在帖子WEB页面显示的程序源代码效果是如何实现的
  8. 引用js文件用href于src的有关问题
  9. css如何让DIV里的文本上下居中