css3优惠券的样式集合

川长思鸟来 2023-08-17 17:02 128阅读 0赞

粘贴代码

忘记在哪个博客看到的了， 做个记录吧，各种css3优惠券的样式集合

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    body {
    	display: flex;
    	flex-wrap: wrap;
    }
    .coupon {
    	display: inline-flex;
    	color: white;
    	position: relative;
    	padding-left: .5rem;
    	padding-right: .5rem;
    	margin: 1rem;
    	/** 这里不能用百分号，因为百分号是分别相对宽和高计算的，会导致弧度不同  */
    	border-top-right-radius: .3rem;
    	border-bottom-right-radius: .3rem;
    	overflow: hidden;
    }
    .coupon-yellow {
    	background-color: #F39B00;
    }
    .coupon-yellow-gradient {
    	background-image: linear-gradient(150deg, #F39B00 50%, #F39B00D8 50%);
    }
    .coupon-red-gradient {
    	background-image: linear-gradient(150deg, #D24161 50%, #D24161D8 50%);
    }
    .coupon-green-gradient {
    	background-image: linear-gradient(150deg, #7EAB1E 50%, #7EAB1ED8 50%);
    }
    .coupon-blue-gradient {
    	background-image: linear-gradient(150deg, #50ADD3 50%, #50ADD3D8 50%);
    }
    /* 左边框的波浪 */
    .coupon-wave-left::before, .coupon-wave-right::after{
    	content: '';
    	position: absolute;
    	top: 0;
    	height: 100%;
    	width: 14px;
    	background-image: radial-gradient(white 0, white 4px, transparent 4px);
    	/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
    	background-size: 14px 14px;
    	background-position: 0 2px;
    	background-repeat: repeat-y;
    	z-index: 1;
    }
    .coupon-wave-left::before {
    	left: -7px;
    }
    .coupon-wave-right::after {
    	right: -7px;
    }
    .coupon-info {
    	padding-left: 1rem;
    	padding-right: 1rem;
    	padding-top: 1rem;
    	padding-bottom: 1.5rem;
    	position: relative;
    	min-width: 15rem;
    }
    .coupon-info-right-dashed {
    	border-right: 2px dashed white;
    }
    .coupon-info-right-solid {
    	border-right: 2px solid white;
    }
    /* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
    .coupon-hole::before, .coupon-hole::after {
    	content: '';
    	width: 1rem;
    	height: 1rem;
    	background-color: white;
    	border-radius: 50%;
    	position: absolute;
    	right: -.5rem;
    }
    .coupon-info::before {
    	top: -.5rem;
    }
    .coupon-info::after {
    	bottom: -.5rem;
    }
    .coupon-info>div {
    	margin-bottom: .2rem;
    }
    .coupon-price {
    	font-size: 250%;
    	font-weight: bold;
    }
    .coupon-price>span {
    	font-size: 40%;
    	margin-left: .5rem;
    	font-weight: normal;
    }
    .coupon-get {
    	padding: 1rem;
    	/** 这里使用flex是为了让文字居中 */
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	flex-direction: column;
    	min-width: 5rem;
    	position: relative;
    }
    .coupon-get>.coupon-desc {
    	font-size: 150%;
    	margin-bottom: .5rem;
    	font-weight: bold;
    }
    .coupon-get-already::after {
    	content: '';
    	width: 5rem;
    	height: 5rem;
    	background-size: 5rem 5rem;
    	background-image: url('data:image/png;base64,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');
    	position: absolute;
    	top: -1rem;
    	right: -1rem;
    }
    </style>
    </head>
    <body>
    <div class="coupon coupon-wave-left coupon-yellow">
    	<div class="coupon-info coupon-hole coupon-info-right-dashed">
    		<div class="coupon-price">¥5.00</div>
    		<div class="coupon-desc">5元优惠券满50.00元使用</div>
    		<div class="coupon-expiry-date">有效期：2018.12.01-2018.12.12</div>
    	</div>
    	<div class="coupon-get coupon-get-already">立即领取</div>
    </div>
    
    <div class="coupon coupon-yellow">
    	<div class="coupon-info coupon-wave-right">
    		<div class="coupon-price">¥5.00</div>
    		<div class="coupon-desc">5元优惠券满50.00元使用</div>
    		<div class="coupon-expiry-date">有效期：2018.12.01-2018.12.12</div>
    	</div>
    	<div class="coupon-get">立即领取</div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">
    	<div class="coupon-info coupon-info-right-dashed">
    		<div class="coupon-store">XXXXXX旗舰店</div>
    		<div class="coupon-price">¥5.00<span>优惠券</span></div>
    		<div class="coupon-description">订单满50.00元</div>
    	</div>
    	<div class="coupon-get">
    		<div class="coupon-desc">副券</div>
    		<div class="coupon-expiry-date">2018.12.01<br/>2018.12.12</div>
    	</div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-red-gradient">
    	<div class="coupon-info coupon-info-right-dashed">
    		<div class="coupon-store">XXXXXX旗舰店</div>
    		<div class="coupon-price">¥5.00<span>优惠券</span></div>
    		<div class="coupon-description">订单满50.00元</div>
    	</div>
    	<div class="coupon-get">
    		<div class="coupon-desc">副券</div>
    		<div class="coupon-expiry-date">2018.12.01<br/>2018.12.12</div>
    	</div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-green-gradient">
    	<div class="coupon-info coupon-info-right-dashed">
    		<div class="coupon-store">XXXXXX旗舰店</div>
    		<div class="coupon-price">¥5.00<span>优惠券</span></div>
    		<div class="coupon-description">订单满50.00元</div>
    	</div>
    	<div class="coupon-get">
    		<div class="coupon-desc">副券</div>
    		<div class="coupon-expiry-date">2018.12.01<br/>2018.12.12</div>
    	</div>
    </div>
    
    <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">
    	<div class="coupon-info coupon-info-right-dashed">
    		<div class="coupon-store">XXXXXX旗舰店</div>
    		<div class="coupon-price">¥5.00<span>优惠券</span></div>
    		<div class="coupon-description">订单满50.00元</div>
    	</div>
    	<div class="coupon-get">
    		<div class="coupon-desc">副券</div>
    		<div class="coupon-expiry-date">2018.12.01<br/>2018.12.12</div>
    	</div>
    </div>
    </body>
    </html>

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="UTF-8">
    
        <meta name="renderer" content="webkit">
    
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    
    <title>平台优惠劵</title>
    
    <style>
    
    @charset "utf-8";
    
    /* reset css start */
    
    html {margin: 0; height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;font-size: 62.5%; }
    
     
    
    body { width: 100%; max-width: 640px;min-width:320px; height: 100%; margin: 0 auto; padding: 0; font-family: "Microsoft Yahei"; font-size: 1.2rem; color: #a1a1a1;
    
    background: #f5f5f5;position: relative; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    
     
    
    a { text-decoration: none; color: #a1a1a1; background: transparent; -webkit-tap-highlight-color: transparent; }
    
    a:active { color: #8c88ff; border: none; outline: none; }
    
     
    
    article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
    
    audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
    
    audio:not([controls]) { display: none; height: 0; }
    
    [hidden], template { display: none; }
    
     
    
    input {border: 1px solid #999; line-height: normal; vertical-align: middle; outline: 0; border-radius: 0; background: #FFFFFF; -webkit-appearance: none; }
    
    input[type="radio"], input[type="checkbox"] { padding: 0;  -webkit-tap-highlight-color:rgba(255,255,255,0);}
    
    input[type="number"] { -moz-appearance: textfield; }
    
    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; height: auto; -webkit-appearance: none !important; }
    
    input[type="search"] { -webkit-appearance: textfield; }
    
    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
    
     
    
    input::-moz-placeholder, textarea::-moz-placeholder {font-size: 1.4rem; color: #c1c1c1; }
    
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {font-size: 1.4rem;  color: #c1c1c1; }
    
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {font-size: 1.4rem;  color: #c1c1c1; }
    
     
    
    button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; -webkit-tap-highlight-color:rgba(255,255,255,0);}
    
    button {border: none; overflow: visible; }
    
    button, select { text-transform: none; }
    
    button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: none; cursor: pointer; }
    
    button[disabled], html input[disabled] { cursor: default; }
    
    button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
    
    textarea { resize: vertical; overflow: auto;}
    
    textarea:focus { outline: none; }
    
     
    
    h1, h2, h3, h4, h5, h6, p, figure, form, blockquote,ul, ol, li, dl, dd, td, th { margin: 0; padding: 0; }
    
    h1, h2, h3, h4, h5, h6{ font: inherit;}
    
    ul, ol { list-style: none; }
    
    em,i{font-style:normal;}
    
    table { border-collapse: collapse; border-spacing: 0; }
    
     
    
    label{ -webkit-tap-highlight-color:rgba(255,255,255,0);}
    
     
    
    img { max-width: 100%;height: auto; border: 0; vertical-align: middle; }
    
     
    
    *{ -webkit-box-sizing: border-box; box-sizing: border-box;}
    
    .coupon-wrapper{width:100%; height:auto; padding:5%;}
    
    .coupon-wrapper .coupon-item{width: 100%;}
    
    .coupon-wrapper h3{ height: 3rem; line-height: 1.8rem;font-size: 1.4rem; color:#454545; padding: 2% 0;}
    
    .coupon-item .nick{padding:.66% 0; color: #fff;}
    
    .coupon-item .coupon-money {width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; font-size: 1.2rem; align-items: center;}
    
    .coupon-item .coupon-money em{font-size: 3.8rem;}
    
    .coupon-item .coupon-money .lay:last-child{flex: 1; padding:0 3%;line-height: 1.66rem;}
    
     
    
    .style-one, .style-two, .style-three, .style-four, .style-five, .style-six, .style-seven{width: 100%; height:8rem; position: relative;margin: 5% 0;
    
     display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; justify-content: center;
    
     background-color: #fff; border:1px solid #E5004F;}
    
    .style-one:after,.style-three:after{content:""; width: 1.2rem; position: absolute; top: 0; bottom: 0; right: 23.9%; display: block; z-index: 9;
    
     background-color: #fff; background-position: 100% 35%; background-size: 2rem .66rem;
    
     background-image: linear-gradient(-45deg, #e5004f 25%, transparent 25%, transparent), linear-gradient(-135deg, #e5004f 25%, transparent 25%, transparent),
    
     linear-gradient(-45deg, transparent 75%, #e5004f 75%), linear-gradient(-135deg, transparent 75%, #e5004f 75%);}
    
    .style-one .info-box, .style-two .info-box, .style-three .info-box, .style-four .info-box, .style-five .info-box , .style-six .info-box, .style-seven .info-box{
    
    -webkit-box: 1; -webkit-flex: 1; flex: 1; padding: 0 3% 0 10%; position: relative;}
    
     
    
    .style-one .info-box:before, .style-one .info-box:after,
    
    .style-one .get-btn:before,  .style-one .get-btn:after,
    
    .style-two .info-box:before, .style-two .info-box:after,
    
    .style-two .get-btn:before,  .style-two .get-btn:after{
    
    content:""; width: 1.4rem; height: 1.8rem; position: absolute; z-index: 9;
    
    border-right: 1px solid #E5004F;  -webkit-border-radius: 50%; border-radius: 50%; background-color: #f5f5f5;
    
    }
    
    .style-one .info-box:before, .style-two .info-box:before{ top:-1.5rem; left:-.5rem; -webkit-transform: rotate(36deg); transform: rotate(36deg);}
    
    .style-one .info-box:after, .style-two .info-box:after{ bottom:-1.5rem; left:-.5rem; -webkit-transform: rotate(-36deg); transform: rotate(-36deg);}
    
    .style-one .get-btn:before, .style-two .get-btn:before{ top:-.5rem; right:-.35rem; -webkit-transform: rotate(136deg); transform: rotate(136deg);}
    
    .style-one .get-btn:after, .style-two .get-btn:after{bottom:-.5rem; right:-.35rem; -webkit-transform: rotate(-136deg); transform: rotate(-136deg);}
    
     
    
    .style-one .get-btn, .style-two .get-btn, .style-three .get-btn, .style-four .get-btn, .style-six .get-btn, .style-seven .get-btn{
    
    width: 24%; height: 8rem; text-align: center; color: #fff; font-size: 1.6rem; background-color: #E5004F; position: relative;}
    
    .style-one .get-btn span{width: 1.6rem; padding: .66rem 2rem .66rem 0; display: inherit; margin:0 auto; word-break: break-all;}
    
     
    
     
    
    更多资料每日分享加群      120342833      验证回答      ZZ
    
     
    
    .style-one .nick, .style-four .nick{color: #c1c1c1;}
    
    .style-one .of, .style-one .lay .tit,
    
    .style-four .of, .style-four .lay .tit,
    
    .style-six .nick{color: #E5004F;}
    
    .style-one .lay .demand, .style-four .lay .demand{color:#454545;}
    
     
    
    .style-two{ background-color: #ED008C; border:1px solid #ED008C; color: #fff;}
    
    .style-two:before, .style-two:after{
    
    content:""; height: .5rem; position: absolute; display: block; z-index: 9;
    
    background-image: linear-gradient(135deg,transparent, transparent 45%, #ED008C, #ED008C 55%, transparent 100%),
    
      linear-gradient(45deg, transparent, #ED008C 45%, #ED008C, transparent 55%, transparent 100%);
    
    background-size: 1rem 1rem; background-repeat: repeat-x, repeat-x;
    
    }
    
    .style-two:before{top: -.36rem; left: .8rem; right: 1rem;}
    
    .style-two:after{bottom: -.36rem; -webkit-transform: rotate(180deg);transform: rotate(180deg); left: 1.1rem; right: 1.2rem;}
    
    .style-two .get-btn{background-color: #ed008c;}
    
    .style-two .get-btn span, .style-three .get-btn span, .style-six .get-btn span, .style-seven .get-btn span{
    
    width:4rem; height: 8rem; display: inline-block; padding:1.66rem 0; font-size: 2rem; word-break: break-all;
    
    }
    
    .style-two .of{color:#FFF100;}
    
     
    
     
    
    .style-three{background-color: #378AE8; border:none; color: #fff;}
    
    .style-three:before{content:""; position: absolute; left:-.66rem; width: 2.4rem; height:2.8rem; top: 50%; -webkit-transform: translate(-30%, -50%);transform: translate(-30%, -50%);
    
    -webkit-box-shadow: 3px 0 0 #aeadad; box-shadow: 3px 0 0 #aeadad;-webkit-border-radius: 80%; border-radius: 80%; background-color: #f5f5f5; }
    
    .style-three:after{right:27%; background-image: linear-gradient(-45deg, #ffffff 25%, #378ae8 25%, #378ae8)}
    
     
    
    .style-three .get-btn, .style-six .get-btn, .style-seven .get-btn{width: 28%; background-color: #fff;}
    
    .style-three .get-btn span, .style-six .get-btn span{ padding:.85rem 0; color: #378AE8;}
    
    .style-three .get-btn span:after, .style-six .get-btn span:after{content:"V"; font-size: 1.6rem;}
    
     
    
    .style-four{background-color: #fff; -webkit-border-radius:1rem; border-radius: 1rem;border: 1px dashed #e5004f;}
    
    .style-four .get-btn{width: 30%; height: 7rem;background-color: #fff; text-align: center;}
    
    .style-four .get-btn span{ display: block; padding:2.66rem 0; font-size: 1.5rem; word-break: break-all; color: #454545;}
    
     
    
    .style-five{background-color: #E5004F; -webkit-border-radius:1rem; border-radius: 1rem;border: none; color: #fff;}
    
    .style-five .get-btn{width: 28%; height: 7rem; position: relative; -webkit-perspective:180; perspective:180;}
    
    .style-five .get-btn:after{content:""; position: absolute; top:0; left:0; right:0; bottom:0; background-color: #F8B551;
    
    transform: rotateY(-28deg); z-index:1; -webkit-border-radius:.66rem; border-radius:.66rem; -webkit-box-shadow: -3px 0 8px #793030; box-shadow: -3px 0 8px #793030;}
    
    .style-five .get-btn span{width:3rem; display: inline-block; font-size: 1.8rem; color: #454545;
    
     position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-30%, -50%); transform: translate(-30%, -50%); z-index:3;}
    
     
    
    .style-six{background-color: #F7DBCD; color:#E5004F; border:none;}
    
    .style-six:after, .style-six:before{ content: ""; height: .5rem; position: absolute;left: 0; right: 0; display: block; z-index: 9;
    
    background-image: linear-gradient(135deg,transparent, transparent 45%, #f5f5f5, #f5f5f5 68%, transparent 100%),
    
      linear-gradient(45deg, transparent, #f5f5f5 45%, #f5f5f5, transparent 55%, transparent 100%);
    
        background-size: 1rem 1rem;  background-repeat: repeat-x, repeat-x;}
    
    .style-six:after{top: -.12rem; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
    
    .style-six:before{ bottom: -.12rem;}
    
    .style-six .get-btn span{ color: #E5004F;}
    
     
    
    .style-seven{background-color: #F3B502; color: #fff; border:none;}
    
    .style-seven:before, .style-seven:after{content:""; position: absolute;  width: 2rem; height: 6rem;
    
    top: 50%; -webkit-transform: translate(0,-50%);transform: translate(0, -50%);
    
     -webkit-border-radius: 50%; border-radius: 50%; background-color: #f5f5f5; }
    
    .style-seven:before{ left: -1rem;-webkit-box-shadow: 2px 0 0 #c6c6c6; box-shadow: 2px 0 0 #c6c6c6;}
    
    .style-seven:after{ right: -1rem;-webkit-box-shadow: -2px 0 0 #c6c6c6; box-shadow: -2px 0 0 #c6c6c6;}
    
     
    
    .style-seven .get-btn{ background-color: #000000; padding-right: .88rem;}
    
     
    
    /* 已领取 */
    
    .style-one.have{border:1px solid #ddd; color: #C1C1C1; color: #C1C1C1;}
    
    .style-one.have .info-box:before, .style-one.have .info-box:after,
    
    .style-two.have .info-box:before, .style-two.have .info-box:after{border-right:1px solid #c1c1c1;}
    
    .style-one.have .of, .style-one.have .tit, .style-one.have .demand,
    
    .style-four.have .of, .style-four.have .tit, .style-four.have .demand{color: #c1c1c1;}
    
    .style-one.have .get-btn{background-color: #c1c1c1;}
    
    .style-one.have .get-btn span{color:#fff; padding: 1.36rem 2rem .66rem 0;}
    
    .style-one.have .get-btn:before, .style-one.have .get-btn:after,
    
    .style-two.have .get-btn:before, .style-two.have .get-btn:after{border-right: #c1c1c1;}
    
    .style-one.have:after{background-image: linear-gradient(-45deg, #c1c1c1 25%, transparent 25%, transparent), linear-gradient(-135deg, #c1c1c1 25%, transparent 25%, transparent),
    
     linear-gradient(-45deg, transparent 75%, #c1c1c1 75%), linear-gradient(-135deg, transparent 75%, #c1c1c1 75%); }
    
     
    
    .style-two.have, .style-three.have{background-color: #c1c1c1; border:none;}
    
    .style-two.have .of{color: #fff;}
    
    .style-two.have:before, .style-two.have:after{background-image: linear-gradient(135deg,transparent, transparent 45%, #c1c1c1, #c1c1c1 55%, transparent 100%),
    
     linear-gradient(45deg, transparent, #c1c1c1 45%, #c1c1c1, transparent 55%, transparent 100%);}
    
    .style-two.have .get-btn{background-color: #c1c1c1;}
    
    .style-two.have .get-btn span, .style-three.have .get-btn span,
    
    .style-six.have .get-btn span, .style-seven.have .get-btn span{width: 1.6rem; padding: 1.36rem 0; font-size: 1.6rem;}
    
     
    
    .style-three.have:after{ background-image: linear-gradient(-45deg, #ffffff 25%, #c1c1c1 25%, #c1c1c1);}
    
    .style-three.have .get-btn span,
    
    .style-four.have .get-btn span,
    
    .style-six.have .get-btn span{color: #767676; font-size: 1.6rem;}
    
    .style-three.have .get-btn span:after,
    
    .style-six.have .get-btn span:after{content:"";}
    
     
    
    .style-four.have{border: 1px dashed #C1C1C1;}
    
     
    
    .style-five.have, .style-five.have .get-btn:after,
    
    .style-six.have, .style-seven.have{background-color: #c1c1c1;}
    
    .style-five.have .get-btn:after{ -webkit-box-shadow: -3px 0 8px #8c8c8c; box-shadow: -3px 0 8px #8c8c8c;}
    
    .style-five.have .get-btn span{width:5rem; font-size: 1.5rem; color: #fff;}
    
     
    
    .style-six.have .nick, .style-six.have .of, .style-six.have .tit, .style-six.have .demand{color: #fff;}
    
    .style-six.have span,
    
    .style-seven.have span{font-size: 1.6rem; color: rgba(189, 189, 189, 1);}
    
     
    
    </style>
    
    </head>
    
    <body>
    
    <div class="coupon-wrapper">
    
    <h3>京东优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-one">
    
    <div class="info-box">
    
    <p class="nick">京东平台优惠劵</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>立即领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-one have">
    
    <div class="info-box">
    
    <p class="nick">京东平台优惠劵</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>唯品会优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-two">
    
    <div class="info-box">
    
    <p class="nick">唯品会平台优惠劵</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>立即领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-two have">
    
    <div class="info-box">
    
    <p class="nick">唯品会平台优惠劵</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>1号店优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-three">
    
    <div class="info-box">
    
    <p class="nick">1号店平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>点击领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-three have">
    
    <div class="info-box">
    
    <p class="nick">1号店平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>当当网优惠券领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-four">
    
    <div class="info-box">
    
    <p class="nick">当当网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span class="coBlack">立即领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-four have">
    
    <div class="info-box">
    
    <p class="nick">当当网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>飞牛网优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-five">
    
    <div class="info-box">
    
    <p class="nick">飞牛网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>立即领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-five have">
    
    <div class="info-box">
    
    <p class="nick">飞牛网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>我买网优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-six">
    
    <div class="info-box">
    
    <p class="nick">我买网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>点击领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-six have">
    
    <div class="info-box">
    
    <p class="nick">我买网平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <h3>苏宁优惠劵领取：</h3>
    
    <div class="coupon-item">
    
    <div class="style-seven">
    
    <div class="info-box">
    
    <p class="nick">苏宁平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>立即领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    <div class="coupon-item">
    
    <div class="style-seven have">
    
    <div class="info-box">
    
    <p class="nick">苏宁平台优惠券</p>
    
    <div class="coupon-money">
    
    <div class="lay of">￥<em>10</em></div>
    
    <div class="lay">
    
    <p class="tit">优惠劵</p>
    
    <p class="demand">满100元可用</p>
    
    </div>
    
    </div>
    
    </div>
    
    <a href="javascript:;" class="get-btn">
    
    <span>已领取</span>
    
    </a>
    
    </div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

转载于:https://www.cnblogs.com/tonnytong/p/11429288.html