วิธีที่จะสร้าง: โคดคูปอง

เรียนรู้วิธีการใช้ CSS ที่จะสร้าง “โคดคูปอง”

โลโก้บริษัท
luckin coffee
ลดราคา 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

หมดอายุ: 03 มกราคม 2025

亲自试一试

วิธีที่จะสร้างโคดคูปอง

ขั้นที่ 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">หมดอายุ: 03 มกราคม 2021</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;
}

亲自试一试