css布局实现移动端手机端领优惠券活动h5页面效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现移动端手机端领优惠券活动h5页面效果代码
代码标签： 移动 端 手机 端领 优惠券 活动 h5 页面 效果
下面为部分代码预览，完整代码请点击下载或在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: #de1829;
color: #ffffff;
}
img {
vertical-align: middle;
max-width: 100%;
}
.container {
width: 100%;
padding: 0 .4rem;
}
/*顶部*/
.top-bar {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: .8rem;
position: relative;
background: #ffffff;
}
.top-bar i {
display: inline-block;
width: .5rem;
height: .8rem;
background: url(//repo.bfw.wiki/bfwrepo/image/60b95f5dd4bec.png) left center no-repeat;
background-size: .17rem .30rem;
position: absolute;
left: .2rem;
}
.top-bar span {
font-size: .32rem;
color: #000000;
}
/* 顶部大图 */
.banner {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
.banner img {
width: 100%;
}
.banner a {
position: absolute;
right: 0;
top: .26rem;
font-size: .24rem;
color: #5c2405;
display: inline-block;
padding: .12rem .15rem .12rem .2rem;
background: linear-gradient(to right bottom,#eb8657,#f7d481);
border-radius: .55rem 0 0 .55rem;
border: .05rem solid #ffffff;
border-right: none;
}
.banner a i {
font-style: italic;
}
/* 礼包月份 */
.month-cate {
width: 100%;
}
.month-cate ul {
width: 100%;;display: flex;
justify-content: space-between;
align-items: center;
height: .72rem;
background: #c60000;
box-shadow: 0 .25rem .25rem rgba(120,0,0,.3);
}
.month-cate ul li {
font-size: .3rem;
color: #fce0b3;
width: 100%;
text-align: center;
position: relative;
height: 100%;
line-height: .72rem;
}
.month-cate ul li.active {
background: #de1829;
border-radius: 0 .3rem 0 0;
box-shadow: 0 .0 .25rem rgba(120,0,0,.3);
}
.month-cate ul li:nth-child(2) {
border-radius: .3rem .3rem 0 0;
}
.month-cate ul li:nth-child(3) {
border-radius: .3rem .3rem 0 0;
}
.month-cate ul li:nth-child(4) {
border-radius: .3rem 0 0 0;
}
/*领取规则*/
.rule-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 9;
display: none;
}
.rule-dialog .mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.3);
}
.rule-dialog .content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80%;
height: auto;
background: #FFFFFF;
border-radius: .35rem;
padding: .25rem;
}
.rule-dialog .content h2 {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: .32rem;
padding-bottom: .3rem;
color: #000;
}
.rule-dialog .content i {
margin-right: .1rem;
}
.rule-dialog .content .desc {
font-size: .24rem;
color: #333;
height: 5rem;
overflow-y: auto;
}
/* 礼包内容 */
.month-detail {
width: 100%;
padding: .25rem .3rem .85rem .3rem;
display: none;
}
.month-detail.active {
display: block;
}
.month-detail .coupon {
width: 100%;
height: auto;
background: #c60000;
border-radius: .25rem;
padding: .3rem .15rem .2rem .15rem;
margin-bottom: .2rem;
}
.month-detail .coupon ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.month-detail .coupon.one ul li {
width: 3.21rem;
height: 3.12rem;
background: url(//repo.bfw.wiki/bfwrepo/image/60c957ae03c8b.png) center center no-repeat;
background-size: 100% 100%;
margin-bottom: .2rem;
position: relative;
text-align: center;
white-space: nowrap;
}
.month-detail .coupon.one ul li .title {
display: inline-block;
font-size: .26rem;
color: #fffef8;
background: linear-gradient(to right,#fb6e4c,#f85450,#f12158);
position: absolute;
top: .02rem;
left: 50%;
transform: translateX(-50%);
padding: .03rem .25rem .06rem .25rem;
border-radius: 0 0 .15rem .15rem;
}
.month-detail .coupon.one ul li .title.yellow {
background: #ffe2b8;
padding: .03rem .15rem .06rem .15rem;
color: #c60000;
}
.month-detail .coupon.one ul li .money {
font-size: .78rem;
color: #fd1011;
padding-top: .4rem;
font-weight: bold;
}
.month-detail .coupon.one ul li .money i {
font-size: .24rem;
padding-left: .18rem;
}
.month-detail .coupon.one ul li .type {
background: linear-gradient(to right,rgba(250,230,230,.1),rgba(250,231,232,1),rgba(250,230,230,.1));
font-size: .26rem;
color: #fd1011;
width: 100%;
padding: .05rem 0;
letter-spacing: .02rem;
position: relative;
}
.month-detail .coupon.one ul li .type::before {
content: "";
display: block;
width: .06rem;
height: .06rem;
background: #fd1012;
border-radius: 50%;
position: absolute;
left: .35rem;
top: 50%;
transform: translateY(-50%);
}
.month-detail .coupon.one ul li .type::after {
content: "";
display: block;
width: .06rem;
height: .06rem;
background: #fd1012;
border-radius: 50%;
position: absolute;
right: .35rem;
top: 50%;
transform: translateY(-50%);
}
.month-detail .coupon ul li .btn {
width: 100%;
position: absolute;
bottom: .2rem;
}
.month-detail .coupon ul li .btn a {
display: inline-flex;
align-items: center;
background: linear-gradient(to right,#f64136,#fd6e49);
padding: .12rem .3rem;
font-size: .26rem;
color: #ffffff;
border-radius: .5rem;
}
.month-detail .coupon ul li .btn a i {
display: inline-block;
width: .25rem;
height: .25rem;
border-radius: 50%;
background: url(//repo.bfw.wiki/bfwrepo/image/60c9583ebdafe.png) center center no-repeat #ffffff;
background-size: .07rem .1rem;
margin-left: .15rem;
margin-top: .05rem;
}
.month-detail .coupon.two ul li {
width: 3.21rem;
height: 1.98rem;
background: #fff;
margin-bottom: .2rem;
border-radius: .3rem;
border: .05rem solid #ffbd96;
overflow: hidden;
position: relative;
}
.month-detail .coupon.two ul li .desc {
background: linear-gradient(to right,#fe664a,#ff352a);
display: flex;
align-items: center;
color: #fbf3da;
padding: .05rem 0;
width: 100%;
}
.month-detail .coupon.two ul li .desc>div {
width: 50%;
text-align: center;
}
.month-detail .coupon.two ul li .desc .l {
display: flex;
align-items: baseline;
justify-content: center;
position: relative;
}
.month-detail .coupon.two ul li .desc .l::after {
content: "";
display: block;
width: .02rem;
height: .63rem;
background: url(//repo.bfw.wiki/bfwrepo/image/60c957ec31c70.png) top center no-repeat;
background-size: 100% 100%;
position: absolute;
right: 0;
top: .2rem;
}
.month-detail .coupon.two ul li .desc .l span {
font-size: .78rem;
}
.month-detail .coupon.two ul li .desc .l i {
font-size: .24rem;
margin-left: .1rem;
}
.month-detail .coupon.two ul li .desc .r {
display: flex;
flex-direction: column;
justify-content: center;
}
.month-detail .coupon.two ul li .desc .r p {
font-size: .24rem;
margin-bottom: .06rem;
}
.month-detail .coupon.two ul li .desc .r span {
font-size: .26rem;
}
.month-detail .coupon.two ul li .btn {
bottom: .07rem;
width: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: flex-start;
}
.month-detail .coupon.two ul li .btn a {
box-shadow: 0 .05rem .05rem rgba(120,0,0,.3);
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexible.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.min.js"></script>
</head>
<body>
<!-- 顶部标题 -->
<div class="top-bar">
<i></i>
<span>领券中心</span>
</div>
<!-- 顶部大图 -->
<div class="banner">
<img src="//repo.bfw.wiki/bfwrepo/icon/60c95a81a88a5.png" alt="">
<a href="javascript:;" class="rule"><i>查看规则</i></a>
</div>
<!--规则弹窗-->
<div class="rule-dialog">
<div class="mask"></div>
<div class="content">
<h2><span>领取规则</span><i class="close">x</i></h2>
<div class="desc">
领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则领取规则
</div>
</div>
</div>
<!-- 礼包月份 -->
<div class="month-cate">
<ul>
<li class="active">9月礼包</li>
<li>10月礼包</li>
<li>11月礼包</li>
<li>12月礼包</li>
</ul>
</div>
<!-- 礼包内容 -->
<div class="month-detail active">
<div class="coupon one">
<ul>
<li>
<p class="title">
新用户超值券
</p>
<p class="money">
<span>25</span><i>元</i>
</p>
<p class="type">
日常用品券
</p>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<p class="title yellow">
完成第一单即可领取
</p>
<p class="money">
<span>10</span><i>元</i>
</p>
<p class="type">
日常用品券
</p>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<p class="title yellow">
完成第二单即可领取
</p>
<p class="money">
<span>15</span><i>元</i>
</p>
<p class="type">
日常用品券
</p>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<p class="title yellow">
完成第三单即可领取
</p>
<p class="money">
<span>25</span><i>元</i>
</p>
<p class="type">
日常用品券
</p>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
</ul>
</div>
<div class="coupon two">
<ul>
<li>
<div class="desc">
<div class="l money">
<span>60</span><i>元</i>
</div>
<div class="r">
<p class="type">
生活日用品
</p>
<span>优惠卷</span>
</div>
</div>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<div class="desc">
<div class="l money">
<span>50</span><i>元</i>
</div>
<div class="r">
<p class="type">
生活日用品
</p>
<span>优惠卷</span>
</div>
</div>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<div class="desc">
<div class="l money">
<span>45</span><i>元</i>
</div>
<div class="r">
<p class="type">
生活日用品
</p>
<span>优惠卷</span>
</div>
</div>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<div class="desc">
<div class="l money">
<span>63</span><i>元</i>
</div>
<div class="r">
<p class="type">
生活日用品
</p>
<span>优惠卷</span>
</div>
</div>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
</ul>
</div>
</div>
<!-- 礼包内容2 -->
<div class="month-detail">
<div class="coupon one">
<ul>
<li>
<p class="title">
新用户超值券
</p>
<p class="money">
<span>35</span><i>元</i>
</p>
<p class="type">
日常用品券
</p>
<div class="btn">
<a href="javascript:;">立即领取<i></i></a>
</div>
</li>
<li>
<p class="title yellow">
完成第一单即可领取
</p>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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