当先锋百科网

首页 1 2 3 4 5 6 7

优惠券是吸引顾客的重要方式,而在网站设计中,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优惠券标签,可以让网站看起来更加美观和专业,同时也可以吸引更多的顾客前来抢购。