(来源百度)
优惠券的本质其实是一个短期刺激消费的工具,它与积分刚好构成了日常营销的基本工具。消费者使用优惠券的目的不言而喻,当然是为了省钱。而同时,也为商家做了无形的广告。
相对于纸质媒体资源的局限性,电子优惠券依托互联网发展,消费者能通过强大的网络搜索实现海量的信息搜索,
好看的优惠劵,能够提高用户的认知度。能够消费者在自我感知到有此类消费需求的时候,为寻求价值剩余而产生的行为。
<body style="background-color: aqua;">
<div class="coupon-wrap"></div>
</body>
<div class="coupon-container">
<div class="coupon-left">
<div class="coupon-left-content">
<div class="coupon">券</div>
<div class="coupon-left-content-text">¥<span class="price">1200</span> </div>
</div>
</div>
<div class="coupon-right">
<div class="coupon-right-content">
<div class="coupon-right-content-text">优惠券</div>
</div>
</div>
</div>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
font-family: "Microsoft YaHei";
}
.coupon-wrap {
width: 600px;
height: 230px;
margin: 50px auto 0;
border-radius: 4px;
overflow: hidden;
}
.coupon-container {
height: 230px;
overflow: hidden;
}
.coupon-left {
width: 457px;
height: 100%;
background-color: #ff7171;
color: #fff;
padding: 14px;
overflow: hidden;
position: relative;
box-sizing: border-box;
float: left;
}
.coupon-left:before {
content: "";
width: 32px;
height: 32px;
background-color: #fff;
position: absolute;
top: 50%;
left: -16px;
margin-top: -16px;
border-radius: 50%;
z-index: 1;
}
.coupon-left-content {
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px #fff;
border-radius: 4px;
position: relative;
}
.coupon-left-content:before {
content: "";
width: 20px;
height: 40px;
background-color: #ff7171;
position: absolute;
top: 50%;
left: -5px;
margin-top: -20px;
border-radius: 0 40px 40px 0;
border-right: 1px solid #fff;
}
.coupon-right-content:after {
border-radius: 0 14px 0 0;
bottom: 0;
}
.coupon-right-content:before {
border-radius: 0 0 14px 0;
top: 0;
}
.coupon-right-content-text {
width: 50px;
font-size: 48px;
color: #ff7171;
margin: 0 auto;
}
.coupon-right-content-text:before {
content: "";
width: 58px;
height: 58px;
border-radius: 50%;
background-color: #ffb8b8;
position: absolute;
top: 50%;
right: -37px;
margin-top: -29px;
}
运行到浏览器。
出现一张1200,带有“ 优惠劵 ”字样 ,带有圆角矩形,红色边框渐变颜色。
本文基于CSS样式基础,介绍了常见优惠劵的样式的实现。在实现圆形切割,content 属性与 :before 及 :after 伪元素如何配合使用,都进行了详细的讲解。对于在项目实现的过程中,遇到的难点,需要注意的点,进行有效讲解。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望对你学习有帮助。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。