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="data:images/pic1.jpg" /></dt><dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd></dl> <div class="btprice_1"></div></div><div class="box"><dl><dt><img src="data:images/pic2.jpg" /></dt><dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div class="btprice_2"></div></div><div class="box"><dl><dt><img src="data: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倒计时插件实现团购秒杀效果
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的 ...
UI基础第十四弹:UItableview使用代码自定义团购页面
一.实现效果二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法添加所有 ...
抖音团购跟小程序团购小程序开发有什么区别？
抖音官方团购和小程序团购有什么区别呢?这个问题很多朋友都不太了解,今天我就给大家分享一下两者之间的区别吧. 那商家在抖音上只需要花费600元,就能给自己的账号挂个蓝v了,挂上蓝v之后这就是我们的企业官 ...
天天团购--源码目录结构
include[类文件,函数文件存放目录] include/constant.php include/engine.php 系统常用函数 include/error_404.php include/e ...
天天团购注册页面空白问题
最近,自己租了个虚拟主机,搭建了一个团购网站,用了一段时间后空间满了,当时就出现了登陆后台页面空白的问题.本以为升级空间就搞定啦,没想到空间升级后,还是有这个问题. 后来,试了很多办法,都不行.最后, ...
【社区团购】打破传统消费模式，小程序源码+页面DIY+限时抢购+优惠券
社区团购作为一种新兴的消费模式,已经成为越来越多人的选择,在社区团购中,商家可以通过团购的方式向消费者提供优惠的价格和服务,同时也可以借助社区团购来扩大销售渠道和提高品牌知名度. 社区团购模式社区团 ...
js实现倒计时类似团购网站
一.demo与效果展示为节约时间,我就直接套用了企鹅团的界面作为demo的背景.因为是倒计时,所以需要一个固定的时间,为了n年后,某位仁兄打开demo页面依然在倒计时,所以我把倒计时时间设成了205 ...
jQuery倒计时（仿团购）
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能. 查看演示 ...
HTML和CSS仿唯品会首页,ecshop仿唯品会2014全模板带团购品牌特卖
ecshop仿唯品会2014全模板带团购品牌特卖,一款简洁时尚的综合通用类模板,特别适用于品牌特卖类电商.整站右侧悬浮式导航特效,头部下拉切换式商品分类树功能.首页多个大幅轮播广告图切换,热销商品功能 ...

HTML特效之团购页面效果

HTML特效之团购页面效果相关推荐

最新文章

热门文章