优惠券是一个商城里面经常使用的功能，今天在开发优惠券插件的时候需要相关的页面样式，从以前自己写的小程序里面自己修改后变成了html的了，现在分享记录一下，方便以后直接取，效果和代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>优惠券中心</title>
<style>
.coupon-list{width: auto; margin: 0 auto}
.coupon-list .item{width: 98%; height: 125px; margin-bottom: 10px;margin: 5px auto;}
.coupon-list .item .float-li{width: 63%;/* height: 100%;*/ border-right: 1px dashed rgba(255,255,255,.3)}
.coupon-list .item .float-li-rig{width: 37%; /*padding-right: 10px;*/ /*height:100%;*/ color: #fff;float: right;}
.coupon-left{position: relative}
.coupon-left .t{position: absolute; color: #fff}
.coupon-left .t1{left: 5px; top: 55px}
.coupon-left .t2{left: 15px; top: 25px; font-size: 40px; font-weight: bold }
.coupon-left .t3{left: 110px; top: 25px; width: 100px; font-size: 15px;}
.coupon-left .t4{left: 5px; top:90px}
.coupon-rig .t{text-align: center;}
.coupon-rig .t1{/*font-size: 40rpx;*/ padding: 15px 0 5px 0;}
.coupon-rig .t3{padding-top:10px}
.coupon-rig .t3 text{background: #fff; color: #333; border-radius: 4px; padding: 5px 20px}
.coupon-rig .t2.t{font-size: 15px;}
.note{background: #faeab7;padding: 10px;}
.stamp{margin-bottom:25px;position:relative;overflow:hidden}
span.action {
border: 1px solid white;
background: white;
padding: 5px;
color: #d42c4b;
}
.t3.t.action {
margin-top: 10px;
}
.stamp i{clear:both;}
.stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #F39B00 15px);background-size:5px 5px;background-position:4px 2px; background: #F39B00}
.stamp02{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #D24161 15px);background-size:5px 5px;background-position:4px 2px; background: #D24161}
.stamp03{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #D24161 15px);background-size:5px 5px;background-position:4px 2px; background: #7EAB1E }
.stamp04{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #D24161 15px);background-size:5px 5px;background-position:4px 2px; background: #50ADD3 }
.stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #D24161 15px);background-size:5px 5px;background-position:4px 2px; background: #f0229b}
.stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #D24161 15px);background-size:5px 5px;background-position:4px 2px; background: #f0229b}
.stamp06{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 15px, #e2e2e2 15px);background-size:5px 5px;background-position:4px 2px; background: #acacac
}
</style>
</head>
<body>
<div class="blank"></div>
<div class="coupon-list">
<div class="item stamp stamp01 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4" >券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
<div class="item stamp stamp02 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4">券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
<div class="item stamp stamp03 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4">券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
<div class="item stamp stamp04 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4" >券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
<div class="item stamp stamp05 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4" >券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
<div class="item stamp stamp06 ">
<!-- 左侧 -->
<div class="float-li t1">
<div class="coupon-left">
<div class="t t1">￥</div>
<div class="t t2">100</div>
<div class="t t3">新人专享全场满199减30</div>
<div class="t t4">券码：264669616164</div>
</div>
</div>
<!-- 右侧 -->
<div class="float-li-rig">
<div class="coupon-rig">
<div class="t1 t">优惠券</div>
<div class="t2 t">2018.01.17</div>
<div class="t2 t">2018.01.25</div>
<div class="t3 t action" ><span class="action">立即领取</span></div>
</div>
</div>
<i></i>
</div>
</div>
<div class="blank"></div>
<div class="box note">
<div>优惠券使用方式：</div>
<div>1、领取优惠券</div>
<div>2、将购买的宝贝加入购物车</div>
<div>3、点击结算时勾选使用优惠券</div>
<div>4、提交订单、付款，订单完成</div>
</div>
</body>
</html>