H5、css實現優惠券(移動端響應式)
阿新 • • 發佈:2019-01-07
css樣式:
頁面佈局:*{margin: 0px; padding:0px;} body{ width: 100%;background-color: #d3111a;} .contain{border-radius: 5px; margin-left: 12px;margin-right: 12px; padding: 10px 13px 10px 13px; background-color: #f5d1d0; position: relative;} .coupon{position:relative;color:#d3111a;width:100%;height:100px; display: flex;justify-content: space-around;margin-bottom: 10px;overflow:hidden;} .coupon:last-child{ margin-bottom: 0px;} .coupon:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .coupon-left{text-align:left;width:80%;background:white;height:95px;font-size:12px;position: relative;box-shadow: 0px 5px 0px #d4696e; border-radius: 5px; } .coupon-right{text-align: center;width:20%;background:white;height:95px;position: relative; box-shadow: 0px 5px 0px #d4696e;border-radius: 5px;} .coupon-inner{padding:10px 10px 10px 15px; height:75px;position: relative;} .coupon-left-inner{display: flex;justify-content: space-between; padding:10px 10px 10px 15px; width:88%;} .coupon-money{width: 70%; padding-top: 10px;padding-bottom: 10px;} .coupon-left-inner-top{line-height: 32px;} .belongTo{ font-size: 18px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;} .sum{ color:#b2b2b2;font-size:16px;} .coupon-condition{line-height: 75px;text-align: right; } .coupon-time{line-height:25px;font-weight: bolder;font-size: 20px;} .coupon-circle{display:inline-block;width:16px;height:16px;background:#f5d1d0;position: absolute;left:-9px;border-radius:50%;z-index: 20} .coupon-circle.top{top:-8px;} .coupon-circle.bottom{bottom: -8px;height: 16px;box-shadow: inset 0px 5px 0px #d4696e;} .center-circle{display: inline-block;width: 10px; height:95px; position: absolute;left:-6px;top:0px; z-index: 10; } .center{ background: #d51d27;background: radial-gradient(#d51d27 5px, transparent 5px, transparent 5px);background-size: 15px 15px;background-position: 13px 10px; } .center:before{background-color:#d51d27;} @media screen and (max-width:374px){ .coupon{height:90px; display: flex;justify-content: space-around;margin-bottom: 10px;overflow:hidden; } .coupon-left{height:85px;font-size:12px; } .coupon-right{height:85px;border-radius: 5px;} .coupon-time{line-height:25px;font-weight: bolder;font-size: 16px;} .coupon-inner{padding:5px 10px 10px 15px; height:70px;position: relative;} .coupon-circle.bottom{bottom: -10px;} .coupon-circle.top{top:-10px;} .center{ background: #d51d27;background: radial-gradient(#d51d27 5px, transparent 5px, transparent 5px); background-size: 15px 15px;background-position: 13px 6px; } }
<div class="contain"> <div class="coupon"> <div class="coupon-left"> <div class="coupon-inner coupon-left-inner"> <div class="coupon-money"> <div class='coupon-left-inner-top belongTo' style="font-size: 16px">來自XXXXxxxxxxxxxxxxxxx商戶</div> <div class="sum " style="font-size:10px">其他介紹</div> </div> <div class="coupon-condition"> <span style="font-size: 30px">200</span><span style="font-size: 12px">元</span> </div> </div> </div> <div class="coupon-right"> <div class="coupon-inner"> <div class="coupon-time" > <p>優</p><p>惠</p><p>券</p> </div> <i class="coupon-circle top"></i> <i class="coupon-circle bottom"></i> <div class="center-circle center"></div> </div> </div> </div> </div>