简单的站内信系统

　　到公司实习一个月了，做了十几年的学生，突然就变成了一名员工。从说“去上课了”变成了“去上班了”。会或多或少的有一些不适应，不管是生活方式还是学习方式甚至是朋友圈都有了特别大的变化。从开始的时候没有什么思路，不知道该怎么去适应公司的工作环境，该怎么去学习才能做一名合格的员工，该学习哪些知识才能适应公司的需求，那么多的工作我到底适合做哪一个。到现在为止，终于不是那么很迷茫，知道自己喜欢什么，知道自己适合什么，知道自己的目标是什么，愿意一步一步的去前进去奋斗，我想这就是很大的进步吧。每一份工作，每一次经历，我相信都会在某一方面给予我很大的启发。

　　越努力越幸运，加油～！

 

1.主要实现功能及工具

　　1>使用Mysql数据库，使用Bootstrap框架

　　2>能够实现登录注册功能，带有简单的验证

　　3>能够实现  发送邮件 查看邮件  选择收件人的功能

　　4>发信时能够制定标题内容

2.注意事项

　　1>提交按钮用标签，button标签不可以。出现问题：找不到请求按钮

　　2>php代码和页面分开写，有时会出现一些notice提示，影响页面美观

　　3>登录时注意用session保存登录的用户

　　4>登录验证问题

　　5>查看发件箱收件箱的sql语句要写收件人和发件人的条件，否则会显示所有信箱的内容

　　6>注意一些值为空的情况要写判断语句

　　7>注意格式排版！！慢慢提高，写的真的好乱～！

3.数据库设计

　　1>用户表：ID,userID,username,password,confirmPassword,isAdmin,emial

　　2>邮件内容:emailBoxID,receiver,sender,title,content

4.思路及步骤

　　1>登录界面的实现

　　2>数据库的设计

　　3>主界面，注册界面的设计与实现

　　4>发送邮件 邮件列表 发件箱  界面设计与实现

　　5>查找缺陷进行补充

5.登录页面

<span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>邮箱登录<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="../bootstrap/css/bootstrap.min.css"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap/js/jquery.min.cs"</span><span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap.min.js"</span><span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> 
    <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">&gt;</span><span style="background-color: #f5f5f5; color: #800000;">
            html,body</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                    height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #A3D5FB</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            
            .login-box</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 700px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">    
                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>        
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .form-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .login-title</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(0,0,0,0.6)            
            </span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .login-title small</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>            
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            .login-content</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(255,255,255,0.6)</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>            
            <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
            @media screen and (min-width:500px)</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
                .login-box {
                        left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
                        margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -250px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
}
    .btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 6px 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .input-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 30px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .form-control</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
    <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
    .link p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
        line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
        margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
        
    <span style="background-color: #f5f5f5; color: #000000;">}</span>

            
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span>
        <span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> doSubmit() {
            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;">($(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#username</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).value()){
                alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">用户名不能为空</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
                </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;">;            
            }
            </span><span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> ($(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#password</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).value)) {
                alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">密码不能为空</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);
                </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;">;
            }
            $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">form1</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).submit();
        }
    </span><span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>

    
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-box"</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-title text-center"</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">small</span><span style="color: #0000ff;">&gt;</span>站内信登录<span style="color: #0000ff;"></span><span style="color: #800000;">small</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-content"</span><span style="color: #0000ff;">&gt;</span>
                        <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="form1"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="../php/login.php"</span><span style="color: #0000ff;">&gt;</span>
                            <span style="color: #008000;"><!--</span><span style="color: #008000;">用户ID</span><span style="color: #008000;">--></span>
                                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">&gt;</span>
                                        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-user"</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="用户ID"</span><span style="color: #0000ff;">&gt;</span>    
                                        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                            <span style="color: #008000;"><!--</span><span style="color: #008000;">密码</span><span style="color: #008000;">--></span>
                                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">&gt;</span>
                                        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="glyphicon glyphicon-lock"</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="密码"</span><span style="color: #0000ff;">&gt;</span>            
                                        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                            <span style="color: #008000;"><!--</span><span style="color: #008000;">登录按钮</span><span style="color: #008000;">--></span>
                                <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-4 col-md-offset-4"</span><span style="color: #0000ff;">&gt;</span>
                                        <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="btn btn-info active navbar-btn "</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="登录"</span><span style="color: #0000ff;">&gt;</span>
                                    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>

                                    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>

                                            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12 col-md-offset-9 link"</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
                                                <span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="text-center remove-margin"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="javascript:void(0)"</span><span style="color: #0000ff;">&gt;</span>忘记密码<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span>
                                                <span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">&gt;</span>

                                                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>        
                                        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                                                            
                        <span style="color: #0000ff;"></span><span style="color: #800000;">form</span><span style="color: #0000ff;">&gt;</span>                    
                    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
                <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>            
            <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

login.html

6.帮助类

<span style="color: #008080;"> 1</span> <span style="color: #000000;">php
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">if</span> (!<span style="color: #0000ff;">isset</span> (<span style="color: #800080;">$_SESSION</span><span style="color: #000000;">)) {
</span><span style="color: #008080;"> 3</span>     <span style="color: #008080;">ob_start</span><span style="color: #000000;">();
</span><span style="color: #008080;"> 4</span>     <span style="color: #008080;">session_start</span><span style="color: #000000;">();
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 6</span>  <span style="color: #008080;">header</span>("Content-type:text/html;charset=utf-8"<span style="color: #000000;">);
</span><span style="color: #008080;"> 7</span>       <span style="color: #800080;">$conn</span>=<span style="color: #008080;">mysql_connect</span>('127.0.0.1','root','root'<span style="color: #000000;">);
</span><span style="color: #008080;"> 8</span>      <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$conn</span><span style="color: #000000;">) {
</span><span style="color: #008080;"> 9</span>          <span style="color: #008080;">mysql_select_db</span>("MailUserManage", <span style="color: #800080;">$conn</span><span style="color: #000000;">);
</span><span style="color: #008080;">10</span>          <span style="color: #008080;">mysql_query</span>("set names 'utf-8'"<span style="color: #000000;">);
</span><span style="color: #008080;">11</span> <span style="color: #000000;">         }
</span><span style="color: #008080;">12</span>          <span style="color: #0000ff;">else</span><span style="color: #000000;"> {
</span><span style="color: #008080;">13</span>              <span style="color: #0000ff;">die</span><span style="color: #000000;">();
</span><span style="color: #008080;">14</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">15</span> ?&gt;

helper.php

 

7.登录功能实现

<span style="color: #008080;"> 1</span> <span style="color: #000000;">php
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">require_once</span>("helper.php"<span style="color: #000000;">);
</span><span style="color: #008080;"> 3</span>     
<span style="color: #008080;"> 4</span> 
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">isset</span>(<span style="color: #800080;">$_POST</span>['submit'<span style="color: #000000;">])) 
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;">{
</span><span style="color: #008080;"> 7</span>         <span style="color: #800080;">$userID</span>=<span style="color: #800080;">$_POST</span>['userID'<span style="color: #000000;">];
</span><span style="color: #008080;"> 8</span>         <span style="color: #800080;">$password</span>=<span style="color: #800080;">$_POST</span>['password'<span style="color: #000000;">];
</span><span style="color: #008080;"> 9</span>         <span style="color: #800080;">$sql</span>="select * from Users where userID='<span style="color: #800080;">$userID</span>'"<span style="color: #000000;">;
</span><span style="color: #008080;">10</span>         <span style="color: #800080;">$result</span>=<span style="color: #008080;">mysql_query</span>(<span style="color: #800080;">$sql</span>) or <span style="color: #0000ff;">die</span>("帐号不正确"<span style="color: #000000;">);
</span><span style="color: #008080;">11</span>         <span style="color: #800080;">$num</span>=<span style="color: #008080;">mysql_num_rows</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">);
</span><span style="color: #008080;">12</span>          <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$num</span><span style="color: #000000;">) {
</span><span style="color: #008080;">13</span>             <span style="color: #800080;">$row</span>=<span style="color: #008080;">mysql_fetch_array</span>(<span style="color: #800080;">$result</span><span style="color: #000000;">);
</span><span style="color: #008080;">14</span>             
<span style="color: #008080;">15</span>         <span style="color: #0000ff;">if</span>(<span style="color: #800080;">$row</span>['password']==<span style="color: #800080;">$password</span><span style="color: #000000;">) {    
</span><span style="color: #008080;">16</span>             <span style="color: #0000ff;">echo</span> "登录成功，正在为您跳转至邮箱首页"<span style="color: #000000;">;    
</span><span style="color: #008080;">17</span>             <span style="color: #800080;">$_SESSION</span>['Users']=<span style="color: #800080;">$_POST</span>['userID'<span style="color: #000000;">];
</span><span style="color: #008080;">18</span>             <span style="color: #008080;">header</span>("Location:../index.php"<span style="color: #000000;">);
</span><span style="color: #008080;">19</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">20</span>         <span style="color: #0000ff;">else</span><span style="color: #000000;"> {        
</span><span style="color: #008080;">21</span>             <span style="color: #0000ff;">echo</span> "<script>alert('密码错误，请重新输入');</script>"<span style="color: #000000;">;
</span><span style="color: #008080;">22</span>             <span style="color: #008080;">mysql_close</span><span style="color: #000000;">();
</span><span style="color: #008080;">23</span> <span style="color: #000000;">        }
</span><span style="color: #008080;">24</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">25</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">26</span>     <span style="color: #0000ff;">else</span><span style="color: #000000;">{
</span><span style="color: #008080;">27</span>         <span style="color: #0000ff;">echo</span> "<script>alert('请登录用户');</script>"<span style="color: #000000;">;    
</span><span style="color: #008080;">28</span> <span style="color: #000000;">    }
</span><span style="color: #008080;">29</span> 
<span style="color: #008080;">30</span> ?&gt;

8.注册界面

<span style="color: #008080;">  1</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">  2</span> 
<span style="color: #008080;">  3</span>     <span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">  4</span>         <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">  5</span>             <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>注册新用户<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">  6</span>             <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="../bootstrap/css/bootstrap.min.css"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #008080;">  7</span>             <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap/js/jquery.min.cs"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #008080;">  8</span>             <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="../bootstrap.min.js"</span><span style="color: #0000ff;">/&gt;</span>
<span style="color: #008080;">  9</span>             <span style="color: #0000ff;"><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 10</span>                 
<span style="color: #008080;"> 11</span>             <span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 12</span>             
<span style="color: #008080;"> 13</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 14</span>     <span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 15</span> <span style="background-color: #f5f5f5; color: #800000;">            body</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 16</span> <span style="background-color: #f5f5f5; color: #ff0000;">                    height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 17</span> <span style="background-color: #f5f5f5; color: #ff0000;">                    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #A3D5FB</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 18</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 19</span>             
<span style="color: #008080;"> 20</span> <span style="background-color: #f5f5f5; color: #800000;">            .login-box</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 21</span> <span style="background-color: #f5f5f5; color: #ff0000;">                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 22</span> <span style="background-color: #f5f5f5; color: #ff0000;">                max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 400px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 23</span> <span style="background-color: #f5f5f5; color: #ff0000;">                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 800px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 24</span> <span style="background-color: #f5f5f5; color: #ff0000;">                position</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> absolute</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 25</span> <span style="background-color: #f5f5f5; color: #ff0000;">                top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
<span style="color: #008080;"> 26</span> <span style="background-color: #f5f5f5; color: #ff0000;">                margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>        
<span style="color: #008080;"> 27</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 28</span> <span style="background-color: #f5f5f5; color: #800000;">            .form-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 29</span> <span style="background-color: #f5f5f5; color: #ff0000;">                margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 30</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 31</span> <span style="background-color: #f5f5f5; color: #800000;">            .login-title</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 32</span> <span style="background-color: #f5f5f5; color: #ff0000;">                padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px 10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 33</span> <span style="background-color: #f5f5f5; color: #ff0000;">                background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(0,0,0,0.6)            
</span><span style="color: #008080;"> 34</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 35</span> <span style="background-color: #f5f5f5; color: #800000;">            .login-title small</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 36</span> <span style="background-color: #f5f5f5; color: #ff0000;">                color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #fff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>            
<span style="color: #008080;"> 37</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 38</span> <span style="background-color: #f5f5f5; color: #800000;">            .login-content</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 39</span> <span style="background-color: #f5f5f5; color: #ff0000;">                height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 500px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 40</span> <span style="background-color: #f5f5f5; color: #ff0000;">                width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 100%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 41</span> <span style="background-color: #f5f5f5; color: #ff0000;">                max-width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 600px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 42</span> <span style="background-color: #f5f5f5; color: #ff0000;">                background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> rgba(255,255,255,0.6)</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 43</span> <span style="background-color: #f5f5f5; color: #ff0000;">                float</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> left</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 44</span> <span style="background-color: #f5f5f5; color: #ff0000;">                padding-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>            
<span style="color: #008080;"> 45</span>             <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 46</span> <span style="background-color: #f5f5f5; color: #800000;">            @media screen and (min-width:500px)</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 47</span> <span style="background-color: #f5f5f5; color: #ff0000;">                .login-box {
</span><span style="color: #008080;"> 48</span> <span style="background-color: #f5f5f5; color: #ff0000;">                        left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50%</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 49</span> <span style="background-color: #f5f5f5; color: #ff0000;">                        margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> -250px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 50</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 51</span> <span style="background-color: #f5f5f5; color: #800000;">}
</span><span style="color: #008080;"> 52</span> <span style="background-color: #f5f5f5; color: #800000;">    .btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 53</span> <span style="background-color: #f5f5f5; color: #ff0000;">        padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 6px 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 54</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 55</span> <span style="background-color: #f5f5f5; color: #800000;">    .input-group</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 56</span> <span style="background-color: #f5f5f5; color: #ff0000;">        margin-bottom</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 57</span> <span style="background-color: #f5f5f5; color: #ff0000;">        margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px 0px 30px 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 58</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
<span style="color: #008080;"> 59</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 60</span> <span style="background-color: #f5f5f5; color: #800000;">    .form-control</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 61</span> <span style="background-color: #f5f5f5; color: #ff0000;">        height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
<span style="color: #008080;"> 62</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 63</span> <span style="background-color: #f5f5f5; color: #800000;">    .link p</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 64</span> <span style="background-color: #f5f5f5; color: #ff0000;">        line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="color: #008080;"> 65</span> <span style="background-color: #f5f5f5; color: #ff0000;">        margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 30px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
<span style="color: #008080;"> 66</span>         
<span style="color: #008080;"> 67</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;"> 68</span> <span style="background-color: #f5f5f5; color: #800000;">    .navbar-btn</span><span style="background-color: #f5f5f5; color: #000000;">{</span>
<span style="color: #008080;"> 69</span> <span style="background-color: #f5f5f5; color: #ff0000;">        margin-top</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 0px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>    
<span style="color: #008080;"> 70</span>     <span style="background-color: #f5f5f5; color: #000000;">}</span>        
<span style="color: #008080;"> 71</span>     
<span style="color: #008080;"> 72</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 73</span>         
<span style="color: #008080;"> 74</span>             
<span style="color: #008080;"> 75</span> 
<span style="color: #008080;"> 76</span>     
<span style="color: #008080;"> 77</span>             <span style="color: #0000ff;"><span style="color: #800000;">form </span><span style="color: #ff0000;">method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="../php/regist.php"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 78</span> 
<span style="color: #008080;"> 79</span>             <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 80</span>             <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 81</span>                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-box"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 82</span>                     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-title text-center"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 83</span>                         <span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;<span style="color: #800000;">small</span><span style="color: #0000ff;">&gt;</span>用户注册<span style="color: #0000ff;"></span><span style="color: #800000;">small</span><span style="color: #0000ff;">&gt;</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 84</span>                     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 85</span>                     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="login-content"</span><span style="color: #0000ff;">&gt;</span>    
<span style="color: #008080;"> 86</span>                             <span style="color: #008000;"><!--</span><span style="color: #008000;">用户ID</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 87</span>                                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 88</span>                                     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 89</span>                                         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 90</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">&gt;</span>用<span style="color: #ff0000;"> </span>户<span style="color: #ff0000;"> </span>ID<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 91</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="userID"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="只能为字母和数字，以字母开头，长度6-10位"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 92</span>                                         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 93</span>                                     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 94</span>                                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 95</span>                                 
<span style="color: #008080;"> 96</span>                             <span style="color: #008000;"><!--</span><span style="color: #008000;">密码</span><span style="color: #008000;">--></span>
<span style="color: #008080;"> 97</span>                                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 98</span>                                     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;"> 99</span>                                         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">100</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">&gt;</span>密<span style="color: #ff0000;">      </span>码<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">101</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="6位以上"</span><span style="color: #0000ff;">&gt;</span>            
<span style="color: #008080;">102</span>                                         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">103</span>                                     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">104</span>                                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">105</span>                                 
<span style="color: #008080;">106</span>                                 <span style="color: #008000;"><!--</span><span style="color: #008000;">确认密码</span><span style="color: #008000;">--></span>
<span style="color: #008080;">107</span>                                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="form-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">108</span>                                     <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="col-md-12"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">109</span>                                         <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group"</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">110</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="input-group-addon"</span><span style="color: #0000ff;">&gt;</span>确认密码<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">111</span>                                             <span style="color: #0000ff;"><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="configPassword"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="configPassword"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="form-control"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="确认密码"</span><span style="color: #0000ff;">&gt;</span>            
<span style="color: #008080;">112</span>                                         <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">113</span>                                     <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">114</span>                                 <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #008080;">115</span>                                 <span style="color: #008000;"><!--</span><span style="color: #008000;">用户昵称</span><span style="color: #008000;">--></span>
<span style="color: #008080;">116</span>                                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>