简易在线投票系统(php)——前端设计（html部分）

简易在线投票系统要求能够支持用户账号的登录和注册，可以进行发起投票、进行投票、查看结果的功能。首先通过前端设计，为各个功能的实现做好准备。

这个项目的初衷只是为了应付学校的检查，所以在前端的设计上，力图简单、清晰，整个前端部分没有添加任何图片或特效，只是单纯的完成各项功能。

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="取消" onclick="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="取消" onclick="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="确定" onclick="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、我提交的投票页面

除此之外，还有一个“我提交的投票”页面，这个页面实在确定用户登录后，显示用户发起的所有投票，并方便用户查看这些投票结果的页面，该页面与主页十分相似。