在网页设计中,优惠券是一种常见的促销方式。通过CSS美化优惠券的样式,可以让网站更具吸引力。下面我们来看看如何使用CSS优化优惠券代码。
.coupon { padding: 10px; background-color: #fff; box-shadow: 0px 0px 10px #ccc; border-radius: 5px; width: 200px; font-size: 18px; font-weight: bold; text-align: center; } .coupon-code { margin: 10px 0; padding: 5px; border: 2px solid #f00; font-size: 24px; color: #f00; } .coupon-expire { font-size: 12px; color: #888; } .coupon button { background-color: #f00; color: #fff; border: none; border-radius: 3px; padding: 5px 10px; font-size: 18px; cursor: pointer; }
上面的代码使用了CSS3的阴影、圆角、边框等属性,让优惠券显示得更美观。同时,我们还给优惠券设置了一个打印样式,方便用户打印之后仍能保持美观。
@media print { .coupon { background-color: #fff; box-shadow: none; border: none; } .coupon button { display: none; } }
通过CSS,我们可以使优惠券的代码更具表现力,达到更好的展示效果。同时,还可以根据需要进行修改,使页面更适合不同的设备和用户群体。