css布局实现移动端手机端电商秒杀页面代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现移动端手机端电商秒杀页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>秒杀</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
*{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
body{width: 100%;overflow-x: hidden;background-image:linear-gradient(to right bottom,#fb4471,#e1221d);background-size: 100% 3.35rem;background-repeat: no-repeat;background-color: #f3f3f3;color: #ffffff;}
img{vertical-align: middle;max-width: 100%;}
.container{width: 100%;padding: 0 .4rem;}
/*顶部标题返回*/
.top-bar{position: absolute;top: 0;left: 0;display: flex;align-items: center;width: 100%;height: 1.2rem;position: relative;padding: 0 .3rem;}
.top-bar i{display: inline-block;width: .5rem;height: 1.2rem;background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png) left center no-repeat;background-size: .37rem .40rem;position: relative;z-index: 3;}
.top-bar .title{position: absolute;height: .4rem;width: 100%;text-align: center;left: 0;font-size: .32rem;z-index: 2;}
.container{width: 100%;padding: .3rem .3rem .5rem .3rem;}
/* 时间段 */
.time-section{width: 100%;padding: 0 .1rem;}
.time-section ul{display: flex;justify-content: space-between;align-items: center;}
.time-section ul li{font-size: .34rem;display: flex;flex-direction: column;justify-content:space-between;height: .8rem;position: relative;text-align: center;}
.time-section ul li span{font-weight: bold;color: #f78998;}
.time-section ul li span.status{font-size: .24rem;font-weight: normal;}
.time-section ul li span:last-child{margin-top: .05rem;}
.time-section ul li.active span{color: #fff;}
/* 推荐 */
.recommend{width: 100%;margin-top: .5rem;margin-bottom: .15rem;background: #ffffff;border-radius: .25rem;padding: .3rem .25rem .35rem .25rem;}
.recommend h2{display: flex; align-items: center;color: #333333;padding-bottom: .25rem;display: flex;justify-content: space-between;}
.recommend h2 span{font-size: .28rem;color: #000;padding-left: .05rem;font-weight: bold;}
.recommend h2 a{font-size: .24rem;color: #e1221d;padding-right: .1rem;}
.group{width: 100%;}
.group.recommend .item{padding-top: 0;margin-bottom: 0rem;}
.group.recommend .item ul{display: flex;justify-content: space-between;}
.group.recommend .item ul li a{display: block;margin: 0 .03rem;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.group.recommend .item ul li img{width: 100%;padding-bottom: .15rem;}
.group.recommend .item ul li span{font-size: .32rem;color: #e1221d;display: flex;align-items: baseline;}
.group.recommend .item ul li span i{font-size: .24rem;}
.group.recommend .item ul li p{font-size: .24rem;color: #999999;padding-top: .05rem;}
/*倒计时*/
.count-down{width: 100%;display: flex;align-items: center;justify-content: space-between;color: #999999;padding: 0 .3rem;}
.count-down h2{font-size: .28rem;color: #000;font-weight: bold;}
.count-down .time{display: flex;align-items: center;font-size: .24rem;color: #999999;}
.count-down .time i{padding-right: .2rem;}
.count-down .time span{display: inline-block;padding: .05rem .07rem;font-size: .22rem;color: #FFFFFF;background: #464450;margin: 0 .06rem;border-radius: .1rem;}
/* 列表 */
.goods-box{width: 100%;margin-top: .25rem;margin-bottom: .15rem;background: #ffffff;border-radius: .25rem;padding-top: .3rem;overflow: hidden;}
.group.list .item{width: 100%;padding: .35rem;background: #ffffff;height: auto;overflow: hidden;display: flex;justify-content: space-between;align-items: top;border-bottom: .01rem solid #f3f3f3;}
.group.list .item:last-child{border-bottom: 0;}
.group.list .item .l {flex-shrink: 0;width: 1.74rem;height: 1.74rem;overflow: hidden;margin-right: .3rem;}
.group.list .item .l img{width: 100%;}
.group.list .item .r {width: 100%;display: flex;flex-direction: column;}
.group.list .item .r .title{font-size: .26rem;color: #000;}
.group.list .item .r p.subtitle{font-size: .24rem;color: #fd181d;padding-top: .1rem;padding-bottom: .2rem;}
.group.list .item .r span.tag{font-size: .22rem;color: #999999;padding: .02rem .05rem;background: #f5f5f5;align-self: flex-start;}
.group.list .item .r .progress{display: flex;align-items: center;height: .1rem;line-height: .1rem;margin-top: .2rem;}
.group.list .item .r .progress label{font-size: .24rem;flex-shrink: 0;color: #ff3600;}
.group.list .item .r .progress span{display: block;width: 100%;height: 100%;background: #f5f5f5;border-radius: .1rem;text-align: center;margin-left: .15rem;overflow: hidden;}
.group.list .item .r .progress span i{float: left;display: inline-block;height: 100%;background: #f9898b;border-radius: .2rem;font-size: inherit;}
.group.list .item .r .buy{display: flex;width: 100%;justify-content: space-between;align-items: flex-end;margin-top: .15rem;}
.group.list .item .r .buy .price{display: flex;align-items: baseline;}
.group.list .item .r .buy .price span{font-size: .43rem;color: #d61204;font-weight: bold;}
.group.list .item .r .buy .price span i{font-size: .28rem;}
.group.list .item .r .buy .price span.through{text-decoration: line-through;color: #999999;font-size: .28rem;margin-left: .25rem;font-weight: normal;}
.group.list .item .r .buy .btn{display: flex;flex-direction: column;align-items: flex-end;justify-content: center;}
.group.list .item .r .buy .btn a{display: flex;flex-shrink: 0;align-items: center;justify-content: center;width: 1.55rem;height: .6rem;line-height: .6rem;border-radius: .6rem;background-image: linear-gradient(to right,#fe5b00,#ff2b00);font-size: .24rem;color: #fff;}
.group.list{display: none;}
.group.list.active{display: block;}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto1.01.js"></script>
</head>
<body>
<!-- 顶部返回，提醒 -->
<div class="top-bar">
<i></i>
<div class="title">秒杀</div>
</div>
<div class="container">
<!-- 时间段 -->
<div class="time-section">
<ul>
<li class="active">
<span>18:00</span>
<span class="status">抢购中</span>
</li>
<li>
<span>20:00</span>
<span class="status">即将开抢</span>
</li>
<li>
<span>22:00</span>
<span class="status">即将开抢</span>
</li>
<li>
<span>00:00</span>
<span class="status">即将开抢</span>
</li>
<li>
<span>06:00</span>
<span class="status">即将开抢</span>
</li>
</ul>
</div>
<!-- 推荐 -->
<div class="group recommend">
<h2><span>专属推荐</span><a onclick="change()">换一换</a></h2>
<div class="item">
<ul>
<li>
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd752ac3e0a.png" alt="">
<span><i>￥</i>152</span>
<p>已抢5874件</p>
</a>
</li>
<li>
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd752ac3e0a.png" alt="">
<span><i>￥</i>152</span>
<p>已抢5874件</p>
</a>
</li>
<li>
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd752ac3e0a.png" alt="">
<span><i>￥</i>152</span>
<p>已抢5874件</p>
</a>
</li>
<li>
<a href="#">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd752ac3e0a.png" alt="">
<span><i>￥</i>152</span>
<p>已抢5874件</p>
</a>
</li>
</ul>
</div>
</div>
<div class="goods-box">
<!--倒计时-->
<div class="count-down">
<h2>限时抢购</h2>
<div class="time">
<i>距离结束</i>
<span class="hour">24</span>:
<span class="minute">00</span>:
<span class="second">00</span>
</div>
</div>
<!-- 18:00团购列表 -->
<div class="group list active">
<div class="item">
<div class="l">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png" alt="">
</div>
<div class="r">
<p class="title">产品名称产品名称产品名称产品名称</p>
<p class="subtitle">满减 两双立减20元</p>
<span class="tag">1年历史最低价</span>
<div class="buy">
<div class="price">
<span><i>￥</i>0.01</span>
<span class="through">￥998</span>
</div>
<div class="btn">
<a href="javascript:;">立即抢</a>
</div>
</div>
<div class="progress">
<label>已抢60%</label><span><i style="width: 60%;"></i></span>
</div>
</div>
</div>
<div class="item">
<div class="l">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png" alt="">
</div>
<div class="r">
<p class="title">产品名称产品名称产品名称产品名称</p>
<p class="subtitle">满减 两双立减20元</p>
<span class="tag">1年历史最低价</span>
<div class="buy">
<div class="price">
<span><i>￥</i>0.01</span>
<span class="through">￥998</span>
</div>
<div class="btn">
<a href="javascript:;">立即抢</a>
</div>
</div>
<div class="progress">
<label>已抢60%</label><span><i style="width: 60%;"></i></span>
</div>
</div>
</div>
<div class="item">
<div class="l">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png" alt="">
</div>
<div class="r">
<p class="title">产品名称产品名称产品名称产品名称</p>
<p class="subtitle">满减 两双立减20元</p>
<span class="tag">1年历史最低价</span>
<div class="buy">
<div class="price">
<span><i>￥</i>0.01</span>
<span class="through">￥998</span>
</div>
<div class="btn">
<a href="javascript:;">立即抢</a>
</div>
</div>
<div class="progress">
<label>已抢60%</label><span><i style="width: 60%;"></i></span>
</div>
</div>
</div>
</div>
<!-- 20:00团购列表 -->
<div class="group list">
<div class="item">
<div class="l">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png" alt="">
</div>
<div class="r">
<p class="title">产品名称产品名称产品名称2</p>
<p class="subtitle">满减 两双立减20元</p>
<span class="tag">1年历史最低价</span>
<div class="buy">
<div class="price">
<span><i>￥</i>0.01</span>
<span class="through">￥998</span>
</div>
<div class="btn">
<a href="javascript:;">立即抢</a>
</div>
</div>
<div class="progress">
<label>已抢60%</label><span><i style="width: 60%;"></i></span>
</div>
</div>
</div>
<div class="item">
<div class="l">
<img src="//repo.bfw.wiki/bfwrepo/image/60dd75384c21a.png" alt="">
</div>
<div class="r">
<p class="title">产品名称产品名称产品名称2</p>
<p class="subtitle">满减 两双立减20元</p>
<span class="tag">1年历史最低价</span>
<div class="buy">
<div class="price">
<span><i>￥</i>0.01</span>
<span class="through">￥998</span>
</div>
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0