<div css 投票
CSS 是一種用于描述網(wǎng)頁上元素外觀的樣式表語言。在網(wǎng)頁開發(fā)中，常常需要使用 CSS 來實現(xiàn)各種樣式效果，例如對頁面布局進行調(diào)整、設(shè)置字體樣式、設(shè)定顏色等。而 div 是 HTML 中的一個元素標簽，主要用于劃分網(wǎng)頁的不同區(qū)域。在本文中，我們將介紹如何使用 CSS 來實現(xiàn)一個投票系統(tǒng)，并通過幾個代碼案例詳細解釋說明。
案例一： 假設(shè)我們要實現(xiàn)一個簡單的投票系統(tǒng)，頁面上有兩個選項，用戶可以點擊其中一個選項進行投票。當(dāng)用戶點擊某個選項時，選項的背景色將改變，以表示該選項已被選中。
HTML 代碼如下：

<div id="option1" class="option">選項一</div>
<div id="option2" class="option">選項二</div>

CSS 代碼如下：

.option {
width: 200px;
height: 50px;
background-color: #ffffff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
<br>
.option.selected {
background-color: #3399ff;
}

在上述代碼中，我們給兩個選項的 div 元素設(shè)置了一個共同的類名 option，并為選項設(shè)置了一些基本的樣式，包括寬度、高度、背景色等。同時，設(shè)置了鼠標指針的樣式為手型，以表示該元素是可點擊的。然后，通過添加一個名為 selected 的類名，實現(xiàn)了選項被選中時的樣式效果，即背景色從白色變?yōu)樗{色。
案例二： 接下來，我們將進一步完善投票系統(tǒng)，添加投票功能，并顯示每個選項的投票結(jié)果。
HTML 代碼如下：

<div id="option1" class="option" onclick="vote('option1')">選項一</div>
<div id="option2" class="option" onclick="vote('option2')">選項二</div>
<div id="result1" class="result"></div>
<div id="result2" class="result"></div>

CSS 代碼如下：

.result {
width: 200px;
height: 20px;
background-color: #f0f0f0;
text-align: center;
line-height: 20px;
}
<br>
.vote1 {
background-color: #3399ff;
}
<br>
.vote2 {
background-color: #ff9933;
}

JavaScript 代碼如下：

function vote(option) {
var resultElement = document.getElementById("result" + option.substring(6));
var count = parseInt(resultElement.innerText);
count++;
resultElement.innerText = count;
var optionElement = document.getElementById(option);
optionElement.classList.add("selected");
optionElement.removeEventListener("click", vote);
optionElement.classList.add("vote" + option.substring(6));
}

在上述代碼中，我們?yōu)槊總€選項的 div 元素添加了一個 onclick 事件，當(dāng)用戶點擊某個選項時，將觸發(fā)名為 vote 的 JavaScript 函數(shù)。該函數(shù)獲取相應(yīng)選項的投票結(jié)果元素，并更新投票結(jié)果。然后，選項元素添加一個名為 selected 的類名，以顯示選中效果。最后，將選項的點擊事件移除，以防止用戶重復(fù)投票。
通過以上兩個案例，我們可以看出，使用 CSS 可以很方便地實現(xiàn)投票系統(tǒng)的樣式效果。通過添加相應(yīng)的類名，可以完成選項被選中時的背景色變化和投票結(jié)果的顯示。同時，結(jié)合 JavaScript 的事件監(jiān)聽和 DOM 操作，還可以實現(xiàn)投票功能的邏輯處理。