jQuery购物网页经典制作案例
chen12370 人气:0本文实例为大家分享了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=""><https://img.qb5200.com/download-x/dt> <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)<https://img.qb5200.com/download-x/dd> <https://img.qb5200.com/download-x/dl> <div class="btprice_1"></div> </div> <div class="box"> <dl> <dt><img src="images/pic2.jpg" alt=""><https://img.qb5200.com/download-x/dt> <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装<https://img.qb5200.com/download-x/dd> <https://img.qb5200.com/download-x/dl> <div class="btprice_2"></div> </div> <div class="box"> <dl> <dt><img src="images/pic3.jpg" alt=""><https://img.qb5200.com/download-x/dt> <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)<https://img.qb5200.com/download-x/dd> <https://img.qb5200.com/download-x/dl> <div class="btprice_3"></div> </div> </div>
加载全部内容