介绍

介绍

今天我们赶一下进度，福哥打算一下子完成三个比较普通的页面的制作，修改密码页面、绑定邮箱页面、安全问题页面。这三个页面里使用的技术和登录页面基本一样，所以我们就可以快速地把这三个页面制作完成了。

不多说了，直接上代码和截图，大家直接照着来就行了

修改密码页面

HTML

<!-- passwd form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">修改密码</h3>
        <p>请输入当前使用的密码，才能修改新密码</p>
        <form>
            <div class="form-group">
                <label>当前密码</label>
                <input class="form-control" type="password" name="opass" />
            </div>
            <div class="form-group">
                <label>新密码</label>
                <input class="form-control" type="password" name="npass" />
            </div>
            <div class="form-group">
                <label>确认密码</label>
                <input class="form-control" type="password" name="cpass" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">修改密码</button>
            </div>
        </form>
    </div>
</div>
<!-- passwd form end -->

绑定邮箱页面

HTML

<!-- bind Email form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">绑定邮箱</h3>
        <p>请输入您的电子邮箱，系统将向邮箱内发送一封邮件，通过邮件内的链接可以完成邮箱绑定操作</p>
        <form>
            <div class="form-group">
                <label>电子邮箱</label>
                <input class="form-control" type="password" name="opass" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">发送邮件</button>
            </div>
        </form>
    </div>
</div>
<!-- bind Email form end -->

安全问题页面

HTML

<!-- security question form begin -->
<div class="row login-form">
    <div class="col-sm-12">
        <h3 class="text-center">安全问题</h3>
        <p>设置三个安全问题以及对应的答案，在忘记密码的时候可以通过安全问题重置密码</p>
        <form>
            <div class="form-group">
                <label>第一个问题</label>
                <select class="form-control" name="q1">
                    <option>选择一个问题</option>
                    <option value="1">我居住的城市名称是？</option>
                    <option value="2">我养的第一只宠物的名字是？</option>
                    <option value="3">我玩的第一款手机游戏是？</option>
                    <option value="4">我最喜爱的小学教师是？</option>
                    <option value="5">我最喜欢的一本书是？</option>
                    <option value="6">我最爱吃的一个料理是？</option>
                </select>
            </div>
            <div class="form-group">
                <label>第一个问题的答案</label>
                <input class="form-control" type="text" name="a1" />
            </div>
            <div class="form-group">
                <label>第二个问题</label>
                <select class="form-control" name="q2">
                    <option>选择一个问题</option>
                    <option value="1">我居住的城市名称是？</option>
                    <option value="2">我养的第一只宠物的名字是？</option>
                    <option value="3">我玩的第一款手机游戏是？</option>
                    <option value="4">我最喜爱的小学教师是？</option>
                    <option value="5">我最喜欢的一本书是？</option>
                    <option value="6">我最爱吃的一个料理是？</option>
                </select>
            </div>
            <div class="form-group">
                <label>第二个问题的答案</label>
                <input class="form-control" type="text" name="a2" />
            </div>
            <div class="form-group">
                <label>第三个问题</label>
                <select class="form-control" name="q3">
                    <option>选择一个问题</option>
                    <option value="1">我居住的城市名称是？</option>
                    <option value="2">我养的第一只宠物的名字是？</option>
                    <option value="3">我玩的第一款手机游戏是？</option>
                    <option value="4">我最喜爱的小学教师是？</option>
                    <option value="5">我最喜欢的一本书是？</option>
                    <option value="6">我最爱吃的一个料理是？</option>
                </select>
            </div>
            <div class="form-group">
                <label>第三个问题的答案</label>
                <input class="form-control" type="text" name="a3" />
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-sm form-control">修改安全问题</button>
            </div>
        </form>
    </div>
</div>
<!-- security question form end -->

总结

今天福哥一下子完成了三个普通的页面的制作，大家是不是发现了在攻克难题之后，再去做类似的题目的时候就会变得非常简单了呢？

下一课福哥将会设计用户的个人资料页面，这个页面稍微的复杂一点，童鞋们要仔细学了。