本文实例为大家分享了jQuery购物网页经典案例，供大家参考，具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日团购模块</title> <style type="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-repeat 10px 10px ; } .main{ text-align: center; height:308px ; } .box{ width: 300px; height:280px; border:1px solid red; margin:0px 6px ; float: left; cursor:pointer; } dl{ padding-top: 3px ; } dd{ line-height: 30px ; } div.btprice_1{ height:50px ; background: yellow url("images/bt1.jpg")no-repeat 5px 4px ; } div.btprice_2{ height:50px ; background: yellow url("images/bt2.jpg")no-repeat 5px 4px ; } div.btprice_3{ height:50px ; background: yellow url("images/bt3.jpg")no-repeat 5px 4px ; } .hoverstyle{ background-color: darkblue; color: white; } </style> <script type="text/javascript " src="js/jquery-1.8.3.js"></script> <script language="JavaScript"> $(document).ready(function () { $(".box dl").mouseover(function () { $(this).addClass('hoverstyle'); }); $(".box dl").mouseout(function () { $(this).removeClass('hoverstyle'); }); }); </script> </head> <body> <div id="pruduce"> <div></div> <div> <div> <dl> <dt><img src="images/pic1.jpg" alt=""></dt> <dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd> </dl> <div></div> </div> <div> <dl> <dt><img src="images/pic2.jpg" alt=""></dt> <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div></div> </div> <div> <dl> <dt><img src="images/pic3.jpg" alt=""></dt> <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd> </dl> <div></div> </div> </div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【jQuery购物网页经典制作案例】相关文章：
★ jQuery实现限制textarea文本框输入字符数量的方法