【云+社区年度正文】手把手教你用CSS 实现网页优惠券的制作

原创

前端皮皮

修改于 2020-11-27 14:38:02

9390

修改于 2020-11-27 14:38:02

文章被收录于专栏：前端进阶学习交流前端进阶学习交流

一、前言

（来源百度）

优惠券的本质其实是一个短期刺激消费的工具，它与积分刚好构成了日常营销的基本工具。消费者使用优惠券的目的不言而喻，当然是为了省钱。而同时，也为商家做了无形的广告。

相对于纸质媒体资源的局限性，电子优惠券依托互联网发展，消费者能通过强大的网络搜索实现海量的信息搜索，

好看的优惠劵，能够提高用户的认知度。能够消费者在自我感知到有此类消费需求的时候，为寻求价值剩余而产生的行为。

二、项目实现

HTML

1. 创建div盒子，设置body背景颜色。添加class属性。

<body style="background-color: aqua;">
        <div class="coupon-wrap"></div>
</body>

2. 创建左右两边div盒子，添加span标签，字体字样，添加class属性。

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

CSS

1. 清除内外边距，body设置背景颜色，字体样式。

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                background-color: #fff;
                font-family: "Microsoft YaHei";
            }

2. 添加div样式，宽度，高度，边框圆角，边距，overflow: hidden; 防止内容溢出。

     .coupon-wrap {
                width: 600px;
                height: 230px;
                margin: 50px auto 0;
                border-radius: 4px;
                overflow: hidden;
            }

            .coupon-container {
                height: 230px;
                overflow: hidden;
            }

3. 设置优惠劵左边，宽度，高度，背景颜色，字体颜色，box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。

.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;
            }

4. 宽度，高度，偏移1像素模糊，白色阴影重叠。 position: absolute;，使用绝对位置top，left值。border-right 设置右边框的样式。

.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;
            }

5. content 属性与 :before 及 :after 伪元素配合使用，插入字体大小，颜色，背景颜色，高，宽，设置top,left ,right值，生成右边样式。

.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;
            }