简易在线投票系统要求能够支持用户账号的登录和注册，可以进行发起投票、进行投票、查看结果的功能。首先通过前端设计，为各个功能的实现做好准备。
这个项目的初衷只是为了应付学校的检查，所以在前端的设计上，力图简单、清晰，整个前端部分没有添加任何图片或特效，只是单纯的完成各项功能。
1、主页index：
（1）主页页面样式
（2）登录框和注册框
登录框：
注册框：
相关代码：
<div id="landing" style="display:none;">
<div class="inside">
<br/>
<center>欢迎登录网上电子投票系统</center>
<form action="" method="get">
<table>
<tr><td>用户名：</td><td><input type="text" name="username"/></td></tr>
<tr><td>密 码:</td><td><input type="password" name="password"/></td></tr>
<tr><td></td><td><input type="button" value="登录"/>
<input type="reset"/>
<input type="button" value="取消" οnclick="exitDiv('landing');"></td></tr>
</table>
</form>
</div>
</div>
<div id="register" style="display:none;">
<div class="inside">
<br/>
<center>欢迎注册网上电子投票系统</center>
<form action="" method="get">
<table>
<tr><td>用户名：</td><td><input type="text" name="username"/></td></tr>
<tr><td>密 码:</td><td><input type="password" name="password"/></td></tr>
<tr><td>再次输入密码:</td><td><input type="password" name="password2"/></td></tr>
<tr><td></td><td><input type="button" value="注册"/>
<input type="reset"/>
<input type="button" value="取消" οnclick="exitDiv('register');"></td></tr>
</table>
</form>
</div>
</div>
2、这是投票页面
（1）投票页面样式
（2）单选多选窗口代码：
<div id="vote_contend">
<form action="" method="get">
<table>
<tr><td>注意：只能选择一项！</td></tr>
<tr><td><label><input type="radio" name="RadioGroup1" value="item" id="1" />选项1</label></td></tr>
<tr><td><label><input type="radio" name="RadioGroup1" value="item" id="2" />选项2</label></td></tr>
<tr><td><label><input type="radio" name="RadioGroup1" value="item" id="3" />选项3</label></td></tr>
<tr><td><input type="submit" /> <input type="reset"/></td></tr>
</table>
</form>
<form id="form1" name="form1" method="post" action="">
<table>
<tr><td>注意：最多选择x项，最少选择y项！</td></tr>
<tr><td><label><input type="checkbox" name="CheckboxGroup1" value="item" id="1" />复选框1</label></td></tr>
<tr><td><label><input type="checkbox" name="CheckboxGroup1" value="item" id="1" />复选框1</label></td></tr>
<tr><td><label><input type="checkbox" name="CheckboxGroup1" value="item" id="1" />复选框1</label></td></tr>
<tr><td><input type="submit" /> <input type="reset"/></td></tr>
</table>
</form>
</div>
3、发布页面
（1）发布页面样式：
（2）投票框代码： <!--主体内容-->
<div id="contend_form">
<form action="" method="get">
<table>
<tr>
<td>投票的标题：</td><td><input type="text" name="rname" size="50"/></td><td><li>标题不能超过20个字</li></td>
</tr>
<tr>
<td>投票内容简介：</td><td><textarea name="" cols="45" rows="5"></textarea></td><td><li>超过100字的内容将不会在首页显示</li></td>
</tr>
<tr>
<td colspan="2">是否公开结果：<input name="" type="radio" value=""/> 是否为多选：<input name="" type="radio" value=""/></td>
</tr>
<tr>
<td colspan="2">最多选择几项：<input type="text" name="max" size="2"/> 最少选择几项：<input type="text" name="min" size="2"/></td><td><li>这两项的默认值均为1，且不能为0</li></td>
</tr>
<tr>
<td colspan="2">设定选项个数：<input type="text" name="voteCount" id="voteCount" size="4" value="1"/> <input type="button" name="" value="确定" οnclick="addVote();"></td><td><li>输入值不得小于1</li></td>
</tr>
</table>
<hr/>
<div id="addVote">
</div>
<hr/>
<center><input type="button" name="send" value="发布"><li>注意：一旦发布将不能修改！</li></center>
</form>
</div>
这里的代码是在页面样式设置时输入的，并不是最终的代码，在之后的后台制作过程中，会做一定的修改。4、结果页面
（1）结果页面设计
（2）结果框的代码：
<center><h2>这是投票的标题</h2></center>
<div id="vote">
<table>
<tr>
<td>发布人：admin</td><td>发布时间：2016-1-1</td>
</tr>
</table>
<div id="vote_intro">
这里的内容是该投票的题目介绍，介绍的内容是该投票的发布者提出的，他想怎么写就怎么写。这里的内容是该投票的题目介绍，介绍的内容是该投票的发布者提出的，他想怎么写就怎么写……
</div>
<div id="vote_contend">
<div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div>
<div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div><div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div><div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div><div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div>
<div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div>
<div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div><div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div><div class="vote_contend_item"> 选项1</div>
<div class="vote_contend_img">
<div class="vote_contend_strip"></div>
</div>
<div class="vote_contend_count"> 票数：20 得票率：100%</div>
</div>
</div>
5、我提交的投票页面
除此之外，还有一个“我提交的投票”页面，这个页面实在确定用户登录后，显示用户发起的所有投票，并方便用户查看这些投票结果的页面，该页面与主页十分相似。
