layui 登录页面

原创 2019-02-17 15:46:02 540
摘要:<!DOCTYPE html><html><head>    <title>登录页面</title>    <!-- 引入核心样式文件 -->    <link rel="stylesheet

<!DOCTYPE html>

<html>

<head>

    <title>登录页面</title>

    <!-- 引入核心样式文件 -->

    <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">

    <script type="text/javascript" src="../static/plugins/layui/layui.js"></script>  

</head>

<body style="background:#1E9FFF">

    <div style="width: 500px;margin:270px auto 0px; ">

        <div style="background: #fff; border-radius: 4px;box-shadow: 5px 5px 20px #4444;padding: 20px;">

            <form class="layui-form">

                 <div class="layui-form-item" style="color: gray" >

                    <h2>后台管理系统</h2>

                 </div>

                 <hr>

                 <div class="layui-form-item">

                      <label class="layui-form-label">用户名</label>

                      <div class="layui-input-block">

                          <input type="text"  placeholder="请输入用户名" class="layui-input">

                      </div>

                </div>

                 <div class="layui-form-item">

                      <label class="layui-form-label">密码</label>

                      <div class="layui-input-block">

                          <input type="text"  placeholder="请输入密码" class="layui-input">

                      </div>

                </div>

                 <div class="layui-form-item">

                      <label class="layui-form-label">验证码</label>

                      <div class="layui-input-inline">

                          <input type="text" class="layui-input">

                      </div>

                      <img src="../yz.png">

                </div>

                <div class="layui-form-item">

                    <div class="layui-input-block">

                      <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>

                    </div>

                </div>

            </form>

        </div>

    </div>

    

</body>

</html>


批改老师:西门大官人批改时间:2019-02-17 16:08:38
老师总结:作业写的很好,注意处理一下form中的button,点击button的时候会自动提交表单

发布手记

热门词条