CSS是網(wǎng)頁(yè)設(shè)計(jì)的重要組成部分，可以幫助設(shè)計(jì)師實(shí)現(xiàn)各種有趣的功能。其中，設(shè)置原價(jià)和特價(jià)是電商網(wǎng)站使用的常見(jiàn)功能。本文將介紹如何使用CSS設(shè)置原價(jià)和特價(jià)樣式。

首先，我們需要設(shè)置原價(jià)和特價(jià)的基本樣式。我們可以使用pre標(biāo)簽來(lái)展示代碼：

.price {
text-decoration: line-through;
color: gray;
}
.special-price {
font-size: 24px;
color: red;
font-weight: bold;
}

上面的代碼設(shè)置了原價(jià)的樣式和特價(jià)的樣式。原價(jià)的樣式使用了text-decoration: line-through屬性，表示文字中的每個(gè)字符都劃掉線。此外，我們將原價(jià)的顏色設(shè)置為灰色。

特價(jià)的樣式使用了font-size屬性，將字體大小設(shè)置為24像素。我們將特價(jià)的顏色設(shè)置為紅色，并將字體加粗。

接下來(lái)，我們需要將這些樣式應(yīng)用于網(wǎng)頁(yè)中的元素。假設(shè)我們有一個(gè)商品列表，其中每個(gè)商品的原價(jià)和特價(jià)都需要顯示出來(lái)。我們可以使用下面的代碼：

<ul>
<li>
<div class="price">100元</div>
<div class="special-price">80元</div>
</li>
<li>
<div class="price">200元</div>
<div class="special-price">150元</div>
</li>
<li>
<div class="price">80元</div>
<div class="special-price">65元</div>
</li>
</ul>

上面的代碼使用了ul和li標(biāo)簽創(chuàng)建了一個(gè)商品列表。每個(gè)li元素都包含一個(gè)原價(jià)元素和一個(gè)特價(jià)元素。我們根據(jù)商品的不同設(shè)置了不同的原價(jià)和特價(jià)。

通過(guò)上述方法，我們可以輕松設(shè)置網(wǎng)站上的原價(jià)和特價(jià)。這不僅可以讓網(wǎng)站的頁(yè)面更加豐富多彩，也可以幫助消費(fèi)者更好地了解商品的折扣信息。