这个投票代码是我在很早以前做项目时完成的，今天在新的工作中又用到了投票功能，于是我就把上个项目做的东西拿出来做了简单的优化，以便让这个代码更好的扩展和移植。
投票功能在实际应用中的关键在于：需要用百分比控制显示条的长度，之所以使用百分比是用来配合程序分配相应的值来实现投票比率均分的显示效果。
在这个应用里，为了更好的利用图像表现进度条的显示，用到了很多标签，然后对标签进行排列控制长度得到了最终的效果.
DEMO:
以下是CSS代码：
@charset "utf-8"; /* CSS Document */ *{margin:0;padding:0} .voteInfo{ width:550px; padding-top:10px; float:left; } .voteInfo span{ display:block; color:#999; height:20px; line-height:20px; } .voteInfo span em{float:right; color:#F00;} .voteInfo h1{ font-size:16px; height:30px; line-height:30px; color:#005FAB; font-weight:bold; text-align:center; margin-top:20px;} .voteInfo ul{ width:486px; list-style:none; margin:0 auto } .voteInfo ul p{ font-size:12px; color:#999; line-height:18px; } .voteInfo ul li{ height:20px; line-height:20px; margin:0 auto; margin-top:10px; } .voteInfo ul li span{ display:block; float:left } .voteInfo ul li span.voteClassName{width:140px;padding-right:10px;text-align:right} .voteInfo ul li span.voteDataLength{width:186px;} .voteInfo ul li span.voteDataLength em{ width:186px; height:20px; background:#ccc} .voteInfo ul li span.voteDataLength em b{ display:block; height:20px; float:left; } .voteInfo ul li span.voteDataLength em i{ width:2px; height:20px; float:left;} .voteInfo ul li span.voteDataLength em h6{width:184px; height:20px; display:block; float:right;} .voteInfo ul li span.voteDataLength em i.vote1{background:url(../img/poll.gif) left top;} .voteInfo ul li span.voteDataLength em i.vote2{background:url(../img/poll.gif) left -20px;} .voteInfo ul li span.voteDataLength em i.vote3{background:url(../img/poll.gif) left -40px;} .voteInfo ul li span.voteDataLength em i.vote4{background:url(../img/poll.gif) left -60px;} .voteInfo ul li span.voteDataLength em i.vote5{background:url(../img/poll.gif) left -80px;} .voteInfo ul li span.voteDataLength em i.vote6{background:url(../img/poll.gif) left -100px;} .voteInfo ul li span.voteDataLength em i.vote7{background:url(../img/poll.gif) left -120px;} .voteInfo ul li span.voteDataLength em i.vote8{background:url(../img/poll.gif) left -140px;} .voteInfo ul li span.voteDataLength em i.vote9{background:url(../img/poll.gif) left -160px;} .voteInfo ul li span.voteDataLength em i.vote10{background:url(../img/poll.gif) left -180px;} .voteInfo ul li span.voteDataLength em b.votebg1{background:url(../img/poll.gif) right top; float:left;} .voteInfo ul li span.voteDataLength em b.votebg2{background:url(../img/poll.gif) right -20px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg3{background:url(../img/poll.gif) right -40px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg4{background:url(../img/poll.gif) right -60px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg5{background:url(../img/poll.gif) right -80px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg6{background:url(../img/poll.gif) right -100px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg7{background:url(../img/poll.gif) right -120px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg8{background:url(../img/poll.gif) right -140px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg9{background:url(../img/poll.gif) right -160px; float:left;} .voteInfo ul li span.voteDataLength em b.votebg10{background:url(../img/poll.gif) right -180px; float:left;} .voteInfo ul li span.voteNumber{width:140px;padding-left:10px;} .voteInfo ul li span.voteRedio{width:30px;} .voteInfo ul li span.voteSubmitBtm{width:60px;}
以下是html代码：
需要注意的是，进度条的长度一定要用百分比的内联样式，这样才能方便程序对这个数值动态控制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现的投票效果</title>
<link rel="stylesheet" href="css/vote.css" />
</head>
<body>
<div class="voteInfo">
<h1>投票标题</h1>
<ul>
<li>
<span class="voteClassName">项目1:</span>
<span class="voteDataLength"><em><i class="vote1"></i>
<h6><b class="votebg1" style="width:100%;"></b></h6></em></span>
<span class="voteNumber">100%</span>
</li>
<li>
<span class="voteClassName">项目2:</span>
<span class="voteDataLength"><em><i class="vote2"></i>
<h6><b class="votebg2" style="width:90%;"></b></h6>
</em></span>
<span class="voteNumber">90%</span>
</li>
<li>
<span class="voteClassName">项目3:</span>
<span class="voteDataLength"><em><i class="vote3"></i>
<h6><b class="votebg3" style="width:80%;"></b></h6>
</em></span>
<span class="voteNumber">80%</span>
</li>
<li>
<span class="voteClassName">项目4:</span>
<span class="voteDataLength"><em><i class="vote4"></i>
<h6><b class="votebg4" style="width:70%;"></b></h6>
</em></span>
<span class="voteNumber">70%</span>
</li>
<li>
<span class="voteClassName">项目5:</span>
<span class="voteDataLength"><em><i class="vote5"></i>
<h6><b class="votebg5" style="width:60%;"></b></h6>
</em></span>
<span class="voteNumber">60%</span>
</li>
<li>
<span class="voteClassName">项目6:</span>
<span class="voteDataLength"><em><i class="vote6"></i>
<h6><b class="votebg6" style="width:50%;"></b></h6>
</em></span>
<span class="voteNumber">50%</span>
</li>
<li>
<span class="voteClassName">项目7:</span>
<span class="voteDataLength"><em><i class="vote7"></i>
<h6><b class="votebg7" style="width:40%;"></b></h6>
</em></span>
<span class="voteNumber">40%</span>
</li>
<li>
<span class="voteClassName">项目8:</span>
<span class="voteDataLength"><em><i class="vote8"></i>
<h6><b class="votebg8" style="width:30%;"></b></h6>
</em></span>
<span class="voteNumber">30%</span>
</li>
<li>
<span class="voteClassName">项目9:</span>
<span class="voteDataLength"><em><i class="vote9"></i>
<h6><b class="votebg9" style="width:20%;"></b></h6>
</em></span>
<span class="voteNumber">20%</span>
</li>
<li>
<span class="voteClassName">项目10:</span>
<span class="voteDataLength"><em><i class="vote10"></i>
<h6><b class="votebg10" style="width:10%;"></b></h6>
</em></span>
<span class="voteNumber">10%</span>
</li>
</ul>
</div>
</body>
</html>至此，所有代码都在这里了，由于为了更好的表现因此代码嵌套的比较多也比较复杂，因此如果不特别追求效果的话，可以直接用背景色代替，进而获得更精简的代码。
Leave a Reply