欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

HTML特效之团购页面效果

发布时间：2024/1/23 HTML 34 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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特效之团购页面效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。