如何使用CSS樣式制作五星評(píng)價(jià)系統(tǒng)

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要為用戶(hù)提供評(píng)價(jià)系統(tǒng)，如五星評(píng)價(jià)，下面是如何使用CSS樣式制作一個(gè)簡(jiǎn)單的五星評(píng)價(jià)系統(tǒng)的步驟。

1、HTML結(jié)構(gòu)：我們需要?jiǎng)?chuàng)建HTML元素來(lái)表示五星評(píng)價(jià)系統(tǒng)的各個(gè)部分，我們可以使用div元素來(lái)創(chuàng)建評(píng)價(jià)圖標(biāo)和文本。

<div class="star-rating">
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <span class="rating-text">5</span>
</div>

2、CSS樣式：我們將使用CSS來(lái)定義評(píng)價(jià)系統(tǒng)的外觀和行為，我們可以設(shè)置評(píng)價(jià)圖標(biāo)的樣式，如顏色、大小等。

.star-rating {
  display: flex;
  align-items: center;
  justify-content: center;
}
.star {
  width: 20px;
  height: 20px;
  background-color: gold;
  margin: 5px;
}
.rating-text {
  font-size: 24px;
  color: #333;
}

3、JavaScript交互：為了讓評(píng)價(jià)系統(tǒng)更加互動(dòng)，我們可以使用JavaScript來(lái)添加一些交互功能，如當(dāng)用戶(hù)點(diǎn)擊評(píng)價(jià)圖標(biāo)時(shí)，顯示相應(yīng)的評(píng)分。

const stars = document.querySelectorAll('.star');
const ratingText = document.querySelector('.rating-text');
let currentRating = 0;
stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    currentRating = index + 1;
    ratingText.textContent = currentRating;
  });
});

通過(guò)以上步驟，我們可以使用CSS樣式制作一個(gè)簡(jiǎn)單的五星評(píng)價(jià)系統(tǒng)，這只是一個(gè)基本的示例，你可以根據(jù)自己的需求進(jìn)行調(diào)整和優(yōu)化。