優惠券是吸引顧客的重要方式,而在網站設計中,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優惠券標簽,可以讓網站看起來更加美觀和專業,同時也可以吸引更多的顧客前來搶購。
下一篇CSS代碼翻譯官