如何创建：优惠券

学习如何使用 CSS 创建“优惠券”。

Company Logo
كوفي لوكين
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.

استخدم رمز الترويج: BOH232

يغادر: 03 كانون الثاني 2025

جرب بنفسك

كيفية إنشاء الشهادات

الخطوة الأولى - إضافة HTML:

<div class="coupon">
  <div class="container">
    <h3>شعار الشركة</h3>
  </div>
  <img src="هامبرجر.jpg" alt="صورة" style="عرض:100%;">
  <div class="container" style="لون_الخلفية:white">
    <h2><b>20% خصم على مشترياتك</b></h2>
    <p>لوريم إيبسوم...</p>
  </div>
  <div class="container">
    <p>استخدم رمز الترويج: <span class="promo">BOH232</span></p>
    <p class="expire">يغادر: 03 كانون الثاني 2021</p>
  </div>
</div>

الخطوة الثانية - إضافة CSS:

.coupon {
  حافة: 5px مسحوقة #bbb; /* حافة نقاط */
  عرض: 80%;
  مقدار_الجولة: 15px; /* حواف منحنية */
  مقدار_ال边际: 0 auto; /* تركز الشهادة */
  أقصى_عرض: 600px;
}
.container {
  مقدار_حشو: 2px 16px;
  لون_الخلفية: #f1f1f1;
}
.promo {
  لون_الخلفية: #ccc;
  مقدار_حشو: 3px;
}
.expire {
  color: red;
}

جرب بنفسك