优惠券是吸引顾客的重要方式,而在网站设计中,CSS优惠券标签就是很好的一种实现方式。
我们可以利用CSS属性设置优惠券标签的样式,例如利用CSS的伪类来实现标签上显示“新品”、“特价”等字样。代码可以如下:
.coupon-tag { background-color: #e74c3c; color: #fff; padding: 2px 5px; border-radius: 2px; font-size: 12px; font-weight: bold; } .coupon-tag::before{ content: "新品"; font-size: 10px; font-style: italic; font-weight: normal; margin-right: 5px; }
这段代码会生成一个优惠券标签,标签背景色为 #e74c3c 或其它你想要的颜色,字体颜色为白色。同时,在标签前使用伪类(::before)显示“新品”字样。
除了“新品”,我们还可以增加其它字样,比如“特价”、“打折”等。只需要针对不同的优惠券标签设置不同的伪类内容即可。
使用CSS优惠券标签,可以让网站看起来更加美观和专业,同时也可以吸引更多的顾客前来抢购。