如何 - 优惠券
了解如何使用 CSS 创建“优惠券”。
公司标识
购物 20% 折扣
Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.
使用促销代码：BOH232
过期时间：2021 年 1 月 3 日
如何创建优惠券
步骤 1) 添加 HTML
示例
<div class="coupon">
<div class="container">
<h3>公司标识</h3>
</div>
<img src="hamburger.jpg" alt="Avatar" style="width:100%;">
<div class="container" style="background-color:white">
<h2><b>购物 20% 折扣</b></h2>
<p>Lorem ipsum..</p>
</div>
<div class="container">
<p>使用促销代码：<span class="promo">BOH232</span></p>
<p class="expire">过期时间：2021 年 1 月 3 日</p>
</div>
</div>
步骤 2) 添加 CSS
示例
.coupon {
border: 5px dotted #bbb; /* 点状边框 */
宽度：80%；
边框半径：15px；/* 圆角边框 */
边距：0 自动；/* 居中优惠券 */
最大宽度：600px；
}
.container {
填充：2px 16px;
背景颜色：#f1f1f1;
}
.promo {
背景：#ccc;
填充：3px;
}
.expire {
颜色：红色；
}
尝试一下 »
