ကိုယ်စားပြုခြင်း: ကုန်းလက်ခံစာ

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

ပြီးစဉ်: ဘဂျင်နယ် ၃၁, ၂၀၂၅

亲自试一试

ကုန်းလက်ခံစာကိုဖန်တီးခြင်းသည်မှာဘယ်လိုဖြစ်သလဲ

ပထမပုဒ် - 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">ပြီးစဉ်: ဘဂျင်နယ် ၃၁, ၂၀၂၁</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;
}

亲自试一试