操作指南 - 优惠券
了解如何使用 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="头像" 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; /* 点线边框 */
width: 80%;
border-radius: 15px; /* 圆角边框 */
margin: 0 auto; /* 优惠券居中 */
max-width: 600px;
}
.container {
padding: 2px 16px;
background-color: #f1f1f1;
}
.promo {
background: #ccc;
padding: 3px;
}
.expire {
color: red;
}
自己动手试一试 »
