HTML特效之团购页面效果
生活随笔
收集整理的這篇文章主要介紹了
HTML特效之团购页面效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?HTML頁面代碼
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"> <title>今日團購模塊 </title><link rel="stylesheet" href="css/shopping.css"> </head> <body> <div id="pruduce"><div class="top"></div><div class="main"><div class="box"><dl><dt><img src="images/pic1.jpg" /></dt><dd>[包郵]亮點可移動兒童防身高帖（每個ID限20）</dd></dl> <div class="btprice_1"></div></div><div class="box"><dl><dt><img src="images/pic2.jpg" /></dt><dd>[包郵]韓國泡溫泉游泳衣價達瑪分教保守纖瘦大胸泳裝</dd> </dl> <div class="btprice_2"></div></div><div class="box"><dl><dt><img src="images/pic3.jpg" /></dt><dd>[包郵]貴人鳥運動透氣跑鞋P23423(每個限購5件)</dd></dl> <div class="btprice_3"></div></div></div> </div><script src="js/jquery-1.12.4.js" ></script> <script>$(document).ready(function(){$(".box dl").hover(function(){$(this).addClass("hoverstyle");},function(){$(this).removeClass("hoverstyle");});});</script> </body> </html>CSS樣式：
*{margin:0px;padding:0px;font-size:12px; } #pruduce{width:947px;background-color:#F2F2F2; } .top{height:55px;background:url(../images/top.jpg) no-repeat 10px 10px; } .main{text-align:center;height:309px; } .box{width:300px;height:285px;border:1px solid #999;margin:0px 6px;float:left;cursor:pointer; } dl{padding-top:3px;} dd{line-height:30px; }div.btprice_1{height:50px;background:#FFF2CE url(../images/bt1.jpg) no-repeat 5px 4px; } div.btprice_2{height:50px;background:#FFF2CE url(../images/bt2.jpg) no-repeat 5px 4px; } div.btprice_3{height:50px;background:#FFF2CE url(../images/bt3.jpg) no-repeat 5px 4px; } .hoverstyle{background-color:#D51938;color:#fff; }效果展示：
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的HTML特效之团购页面效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery就业课系列之.jQueryD
- 下一篇： jsDate对象和倒计时图片案例