优惠券样式,html优惠券中心领取样式,css优惠券样式

优惠券是一个商城里面经常使用的功能,今天在开发优惠券插件的时候需要相关的页面样式,从以前自己写的小程序里面自己修改后变成了html的了,现在分享记录一下,方便以后直接取,效果和代码如下:

2021-04-11_001107.png

<!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>



评论/留言