PHP微信开发之查询微信精选文章
423
2024-01-31
本文实例为大家分享了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="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/images/pic1.jpg" alt=""></dt> <dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd> </dl> <div class="btprice_1"></div> </div> <div class="box"> <dl> <dt><img src="http://www.gimoo.net/t/1901/images/pic2.jpg" alt=""></dt> <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div class="btprice_2"></div> </div> <div class="box"> <dl> <dt><img src="http://www.gimoo.net/t/1901/images/pic3.jpg" alt=""></dt> <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd> </dl> <div class="btprice_3"></div> </div> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持绿夏网。
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!