使用jQuery制作漂亮的登录页模板，模板里面包含了登录、注册、忘记密码的界面，方便前端开发在制作网页的时候节省时间。

使用方法

在HTML的head标签中先引入css

 <link rel="stylesheet" href="css/normalize.min.css">
 <link rel="stylesheet" href="css/style.css">

在body标签里面引入js

 <script src="js/jquery.min.js"></script>
 <script src="js/script.js"></script>

HTML结构

    <div id="formContainer" class="dwo">
        <div class="formLeft">
            <img src="images/avatar.png">
        </div>
        <div class="formRight">
            <!-- Forgot password form -->
            <form id="forgot" class="otherForm">
                <header>
                    <h1>忘记密码</h1>
                    <p>输入邮箱找回密码</p>
                </header>
                <section>
                    <label>
                        <p>邮箱</p>
                        <input type="email" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <button type="submit">发送邮件</button>
                </section>
                <footer>
                    <button type="button" class="forgotBtn">返回</button>
                </footer>
            </form>

            <!-- Login form -->
            <form id="login">
                <header>
                    <h1>欢迎回来</h1>
                    <p>请先登录</p>
                </header>
                <section>
                    <label>
                        <p>用户名</p>
                        <input type="text" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <label>
                        <p>密码</p>
                        <input type="password" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <button type="submit">登 录</button>
                </section>
                <footer>
                    <button type="button" class="forgotBtn">忘记密码？</button>
                    <button type="button" class="registerBtn">新用户？</button>
                </footer>
            </form>

            <!-- Register form -->
            <form id="register" class="otherForm">
                <header>
                    <h1>用户注册</h1>
                    <p>注册后享受更多服务</p>
                </header>
                <section>
                    <label>
                        <p>用户名</p>
                        <input type="text" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <label>
                        <p>邮箱</p>
                        <input type="email" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <label>
                        <p>密码</p>
                        <input type="password" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <label>
                        <p>重复密码</p>
                        <input type="password" placeholder=" ">
                        <div class="border"></div>
                    </label>
                    <button type="submit">注 册</button>
                </section>
                <footer>
                    <button type="button" class="registerBtn">返回</button>
                </footer>
            </form>
        </div>
    </div>

效果展示