<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>今日團購模塊 </title>
<link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="images/pic1.jpg" /></dt>
<dd>[包郵]亮點可移動兒童防身高帖（每個ID限20）</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic2.jpg" /></dt>
<dd>[包郵]韓國泡溫泉游泳衣價達瑪分教保守纖瘦大胸泳裝</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic3.jpg" /></dt>
<dd>[包郵]貴人鳥運動透氣跑鞋P23423(每個限購5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js" ></script>
<script>
$(document).ready(function(){
$(".box dl").hover(function(){
$(this).addClass("hoverstyle");
},function(){
$(this).removeClass("hoverstyle");
});
});
</script>
</body>
</html>
CSS：
*{
margin:0px;
padding:0px;
font-size:12px;
}
#pruduce{
width:947px;
background-color:#F2F2F2;
}
.top{
height:55px;
background:url(../images/top.jpg) no-repeat 10px 10px;
}
.main{
text-align:center;
height:309px;
}
.box{
width:300px;
height:285px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
dl{
padding-top:3px;
}
dd{
line-height:30px;
}
div.btprice_1{
height:50px;
background:#FFF2CE url(../images/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
height:50px;
background:#FFF2CE url(../images/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
height:50px;
background:#FFF2CE url(../images/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
background-color:#D51938;
color:#fff;
}效果：