转自: https://blog.csdn.net/weixin_44821426/article/details/109095660

第一种

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

两个优惠券CSS样式相关推荐

“高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果
学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果 <!DOCTYPE html> <html> <head><meta ...
一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
JSX设置CSS样式详解
JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...
何为CSS 样式优先级
当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身.下面我们从这两方面去看看 CSS 样式的优先级. CSS 的继承性 CSS 的继承特性指 ...
html css样式div属性,div css
DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是 ...

两个优惠券CSS样式

第一种

第二种

两个优惠券CSS样式相关推荐

最新文章

热门文章