简易在线投票系统要求能够支持用户账号的登录和注册，可以进行发起投票、进行投票、查看结果的功能。首先通过前端设计，为各个功能的实现做好准备。
这个项目的初衷只是为了应付学校的检查，所以在前端的设计上，力图简单、清晰，整个前端部分没有添加任何图片或特效，只是单纯的完成各项功能。
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）发布页面样式：
- 在样式设计中提示部分有一点错位，这是Firefox浏览器的显示问题。经过测试，在其他的浏览器中不会有这种异常的状况出现，并且，这种状况并不会影响正常的使用。
（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）结果页面设计
- 这里所显示的进度条其实是有两个div的嵌套实现的，外面浅灰色的div嵌套内部深灰色的div，同时设置内部div的margin属性，达到页面中的效果。
- 需要说明的是这里使用的并不是表格，而是并排在一列的三个div，以及一个嵌套在其中作为进度条的div。在第一个div和第三个div内侧分别设置1px的黑色边框和1px的margin间隔，可以实现图中div之间分离的效果。
（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、我提交的投票页面
除此之外，还有一个“我提交的投票”页面，这个页面实在确定用户登录后，显示用户发起的所有投票，并方便用户查看这些投票结果的页面，该页面与主页十分相似。
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
