本文實例為大家分享了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 class="top"></div> <div class="main"> <div class="box"> <dl> <dt><img src="images/pic1.jpg" alt=""></dt> <dd>[包郵]亮點可移動兒童防身高帖（每個ID限20）</dd> </dl> <div class="btprice_1"></div> </div> <div class="box"> <dl> <dt><img src="images/pic2.jpg" alt=""></dt> <dd>[包郵]韓國泡溫泉游泳衣價達瑪分教保守纖瘦大胸泳裝</dd> </dl> <div class="btprice_2"></div> </div> <div class="box"> <dl> <dt><img src="images/pic3.jpg" alt=""></dt> <dd>[包郵]貴人鳥運動透氣跑鞋P23423(每個限購5件)</dd> </dl> <div class="btprice_3"></div> </div> </div>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
