jQuery购物网页经典制作案例
本文实例为大家分享了jQuery购物网页经典案例，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>今日团购模块</title>
<styletype="text/css"rel="stylesheet">
*{
margin:0px;
padding:0px;
font-size:12px;
}
#pruduce{
width:948px;
background-color:darkgray;
}
.top{
height:56px;
background:url("images/top.jpg")no-repeat10px10px;
}
.main{
text-align:center;
height:308px;
}
.box{
width:300px;
height:280px;
border:1pxsolidred;
margin:0px6px;
float:left;
cursor:pointer;
}
dl{
padding-top:3px;
}
dd{
line-height:30px;
}
div.btprice_1{
height:50px;
background:yellowurl("images/bt1.jpg")no-repeat5px4px;
}
div.btprice_2{
height:50px;
background:yellowurl("images/bt2.jpg")no-repeat5px4px;
}
div.btprice_3{
height:50px;
background:yellowurl("images/bt3.jpg")no-repeat5px4px;
}
.hoverstyle{
background-color:darkblue;
color:white;
}
</style>
<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>
<scriptlanguage="JavaScript">
$(document).ready(function(){
$(".boxdl").mouseover(function(){
$(this).addClass('hoverstyle');
});
$(".boxdl").mouseout(function(){
$(this).removeClass('hoverstyle');
});
});
</script>
</head>
<body>
<divid="pruduce">
<divclass="top"></div>
<divclass="main">
<divclass="box">
<dl>
<dt><imgsrc="images/pic1.jpg"alt=""></dt>
<dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
</dl>
<divclass="btprice_1"></div>
</div>
<divclass="box">
<dl>
<dt><imgsrc="images/pic2.jpg"alt=""></dt>
<dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
</dl>
<divclass="btprice_2"></div>
</div>
<divclass="box">
<dl>
<dt><imgsrc="images/pic3.jpg"alt=""></dt>
<dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
</dl>
<divclass="btprice_3"></div>
</div>
</div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。