layui登陆页面学习。

原创 2018-12-14 15:02:36 254
摘要:使用layui框架要先引用layui中的css文件与js文件,使用form表单要先声明 一下class=layui-form。<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" /> &nbs

使用layui框架要先引用layui中的css文件与js文件,使用form表单要先声明 一下class=layui-form。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>后台管理页面</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
    <script src="layui/layui.js"></script>
</head>
<body style="background:#273836;width:100%;height:100%;">
    <div style="width:500px;margin:210px auto 0px;">
        <div style="background:#fff;box-shadow:5px 5px 20px #333;padding:40px;border-radius:5px;">
            <form action="" class="layui-form">
                <div class="layui-form-item">后台管理登陆</div>
                <hr />
                <div class="layui-form-item">
                    <lable class="layui-form-label">用户名</lable>
                    <div class="layui-input-block">
                        <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <lable class="layui-form-label">密码</lable>
                    <div class="layui-input-block">
                        <input type="text" name="password" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <lable class="layui-form-label">验证码</lable>
                    <div class="layui-input-inline">
                        <input type="text" name="config" placeholder="请输入验证码" class="layui-input">
                    </div>
                    <img src="layui/images/face/0.gif">
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
                        <button type="reset" class="layui-btn layui-btn-primary">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>


批改老师:韦小宝批改时间:2018-12-14 16:04:35
老师总结:写的很不错!使用了layui感觉写表单都简单多了吧!样式也不用怎么调了!

发布手记

热门词条