返回 layui模仿...... 登陆

layui模仿后台登录页面

关志宇 2019-07-05 09:39:11 387

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8" /> 

    <title>后台</title>

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

    <script type="text/javascript" src="static/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" name="username" placeholder="请输入用户名" class="layui-input">

                </div>

            </div>

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

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

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

                    <input type="password" name="username" 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="" alt="">

             </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>

<script>

    layui.use(['layer', 'form'], function(){

      var layer = layui.layer

      ,form = layui.form;

      

      //layer.msg('Hello World');

    });

    //遵循原生吗哪来及用 组件丰富 体积小 加速布局 可以快速完成界面布局

</script>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网