如何创建 - 优惠券
了解如何使用 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.
Use Promo Code: BOH232
Expires: Jan 03, 2021
如何创建优惠券
步骤 1) 添加 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>
步骤 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;
}
亲自试一试 »
