将背景颜色换成背景图
<!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>无标题文档</title>
<script type="text/javascript" src="learn/jquery.js"></script>
<style>
.finance{
border-bottom:none;
}
.finance dd{
line-height:48px;
color:#0e4f71;
padding:5px 0;
border-bottom:1px solid #eaeaea;
background:#ffffff;
}
.finance dd p{
padding-left:15px;
line-height:38px;
}
finance dd{
display:block;
}
.finance dd:hover{
background:#ffffff;
position:relative;
z-index:1px;
}
.finance dd p:hover{
background:#ebf1e5;
}
.finance dd p:hover .w90,.finance dd p:hover .w120,.finance dd p:hover .w110,.finance dd p:hover .w142{
font-size:18px;
font-weight:bold;
}
.finance dd p:hover span a{
background:#C00;
background-position:-264px -5px;
color:#ffffff;
vertical-align:middle;
line-height:18px;
text-align:left;
padding:0px 0px 0px 6px;
}
.finance dd span a{
padding:0px 5px;
border:none;
color:#0e4f71;
display:inline-block;
width:53px;
height:20px;
vertical-align:middle;
line-height:18px;
}
.finance dd span a:hover{
background:#090;
background-position:-264px -5px;
color:#ffffff;
vertical-align:middle;
line-height:18px;
text-align:left;
padding:0px 0px 0px 6px;
}
.finance dd span a:hover.curre{
background:#60F;
}
/*details wxf 1202*/
.details{
background:#f6f7f5;
padding:20px 0 30px 0;
display:none;
}
.details ul{
padding-left:15px;
}
.details ul li{
float:left;
line-height:30px;
}
.progressbg{
background:#39C;
width:105px;
height:14px;
-moz-border-radius: 3px; /* Gecko browsers */
-webkit-border-radius: 3px; /* Webkit browsers */
border-radius:3px;
margin:0px;
display:inline-block;
vertical-align:middle;
}
.progress{
height:14px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:0px;
background:#2697d2;
display:inline-block;
vertical-align:middle;
*vertical-align:6px;
}
.bond{
background:#dddddd;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:0px 5px;
display:inline-block;
line-height:20px;
}
</style>
</head>
<body>
<dl class="finance">
<dt class="bg_color mb10">
<span class="w146">名称</span>
<span class="w90">年化收益</span>
<span class="w120">理财金额(¥)</span>
<span class="w110">预期收益(¥)</span>
<span class="w142">到期时间</span>
<span class="w60 pl10">操作</span>
</dt>
<script type="text/javascript">
$(document).ready(function(e) {
$(".finance a").click(function(){
var detail = $(this).parent().parent().next('.details');
var ca = $(this);
if(detail.hasClass('down')){
$(this).removeClass('curre');
detail.slideUp(300);
detail.removeClass('down');
detail.addClass('up');
return false;
}
if(detail.hasClass('up')){
$('.details').slideUp(300);
$('.details').removeClass('down');
$('.details').addClass('up');
$(".finance a").removeClass('curre');
$(this).addClass('curre');
detail.slideDown(300);
detail.removeClass('up');
detail.addClass('down');
return false;
}
});
});
</script>
<dd>
<p>
<span class="w146">001期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 74%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
<dd>
<p>
<span class="w146">002期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
<dd>
<p>
<span class="w146">003期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
<dd>
<p>
<span class="w146">004期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
<dd>
<p>
<span class="w146">005期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
<dd>
<p>
<span class="w146">006期</span>
<span class="w90">11.2%</span>
<span class="w120">20,000.00</span>
<span class="w110">2240</span>
<span class="w142">2014-01-15</span>
<span class="w60"><a href="javascript:;">详情</a></span>
</p>
<div class="details clear up">
<ul class="clear">
<li class="w158">投资期限:<em class="gray333">12个月</em></li>
<li class="w264">购买时间:<em class="gray333">2013-08-14 15:02:56</em></li>
<li>获取方式:<em class="gray333">原始购买</em></li>
</ul>
<ul class="clear">
<li class="w158">状态:<em class="blue">正常锁定中</em></li>
<li class="w264">完成进度:<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 10%</li>
<li>操作:<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></li>
</ul>
</div>
</dd>
</dl>
</body>
</html>