如何創建：優惠券

學習如何使用 CSS 創建“優惠券”。

Company Logo
luckin coffee
20% OFF YOUR PURCHASE

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.

Use Promo Code: BOH232

Expires: Jan 03, 2025

親自試一試

如何創建優惠券

第一步 - 添加 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>

第二步 - 添加 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;
}

親自試一試