操作指南 - 優惠券
瞭解如何使用 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;
}
自己動手試一試 »
