先給大家展示效果圖：

查看演示 下載源碼

這是一個非常實用的投票實例，應用在雙方觀點對抗投票場景。用戶可以選擇支持代表自己觀點的一方進行投票，本文以紅藍雙方投票為例，通過前后臺交互，直觀展示紅藍雙方投票數和所占比例，應用非常廣泛。

本文是一篇綜合知識應用類文章，需要您具備PHP、jQuery、MySQL以及html和css方面的基本知識。

HTML

我們需要在頁面中展示紅藍雙方的觀點，以及對應的投票數和比例，以及用于投票交互的手型圖片，本例以#red和#blue分別表示紅藍雙方。.redhand和.bluehand用來做手型投票按鈕，.redbar和.bluebar展示紅藍雙方比例調，#red_num和#blue_num展示雙方投票數。

<div class="vote">  <div class="votetitle">您對Helloweba提供的文章的看法？</div>  <div class="votetxt">非常實用<span>完全看不懂</span></div>  <div class="red" id="red">  <div class="redhand"></div>  <div class="redbar" id="red_bar">   <span></span>   <p id="red_num"></p>  </div>  </div>  <div class="blue" id="blue">  <div class="bluehand"></div>  <div class="bluebar" id="blue_bar">   <span></span>   <p id="blue_num"></p>  </div>  </div> </div> 

CSS

使用CSS將頁面美化，加載背景圖片，確定相對位置等等，你可以直接復制以下代碼，在自己的項目中稍作修改即可。

.vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} .votetitle{width:100%;height:62px; background:url(icon.png) no-repeat 0 30px; font-size:15px} .red{position:absolute; left:0; top:90px; height:80px;} .blue{position:absolute; right:0; top:90px; height:80px;} .votetxt{line-height:24px} .votetxt span{float:right} .redhand{position:absolute; left:0;width:36px; height:36px; background:url(icon.png) no-repeat -1px -38px;cursor:pointer} .bluehand{position:absolute; right:0;width:36px; height:36px; background:url(icon.png) no-repeat -41px -38px;cursor:pointer} .grayhand{width:34px; height:34px; background:url(icon.png) no-repeat -83px -38px;cursor:pointer} .redbar{position:absolute; left:42px; margin-top:8px;} .bluebar{position:absolute; right:42px; margin-top:8px; } .redbar span{display:block; height:6px; background:red; width:100%;border-radius:4px;} .bluebar span{display:block; height:6px; background:#09f; width:100%;border-radius:4px; position:absolute; right:0} .redbar p{line-height:20px; color:red;} .bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}