团购网站开发页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了团购网站开发页面相关的知识，希望对你有一定的参考价值。
<!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;
}效果：
以上是关于团购网站开发页面的主要内容，如果未能解决你的问题，请参考以下文章