返回 layui完成...... 登陆

layui完成登录界面

奋斗 2018-11-14 10:06:51 399
<!DOCTYPE html>
<html lang="en">
<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: #0491FF;">
    <div style="width:500px;margin: 290px auto 0px;">
        <div style="background: #fff;border-radius: 4px;box-shadow: 5px 5px 20px #3D5777;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="static/images/yz.png">
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                        <button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

总结:layui很方便,可以快速搭建起简单的前台页面,减少css样式的设计。比较简单,根据文档就可以学会并且使用。在小米商城的轮播图设计中,简单几行代码就可以实现,深深体会到了layui的强大和便捷。

最新手记推荐

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

全部回复(0)我要回复

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