如何使用 - 优惠券

了解如何使用 CSS 创建"coupon"。

公司标志

购买可享 20% 折扣

Lorem ipsum dolor sat amet, et nam pertinax gloriatur. Sea te minimsoleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea。 In sed nullam Laboramus appellantur, mei ei omnis dolorem mnesarchum。

使用促销代码：博赫232

到期时间：2021 年 1 月 3 日

亲自试一试 »

如何创建优惠券

步骤1）添加HTML：

示例

<div class="coupon">
<div class="container">
    <h3>Company Logo</h3>
</div>
<img src="hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
    <h2><b>20% OFF YOUR PURCHASE</b></h2>
    <p>Lorem ipsum..</p>
</div>
<div class="container">
    <p>Use Promo Code: <span class="promo">BOH232</span></p>
    <p class="expire">Expires: Jan 03, 2021</p>
</div>
</div>

步骤2）添加CSS：

示例

.coupon {
border: 5px dotted #bbb; /* Dotted border */
width: 80%;
border-radius: 15px; /* Rounded border */
margin: 0 auto; /* Center the coupon */
max-width: 600px;
}

.container {
padding: 2px 16px;
background-color: #f1f1f1;
}

.promo {
background: #ccc;
padding: 3px;
}

.expire {
color: red;
}

亲自试一试 »