layui后台登录页面

原创 2019-03-23 14:55:33 427
摘要:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>后台登录</title>
<!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: yellow">
<div style="width: 500px;margin: 270px auto 0px">
    <div style="background: #fff;border-radius: 4px;box-shadow:5px 5px 20px #444;padding: 20px;">
        <form class="layui-form" action="" method="">
            <div class="layui-form-item" style="color: gray">
                <h2>后台登录</h2>
                <hr>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="title"  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" name="title"  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" name="text" placeholder="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">验证码</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" >登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

效果图:

    logo.png

总结:layui很方便,可以直接拿来就用。

批改老师:查无此人批改时间:2019-03-23 15:15:35
老师总结:说的对,框架就是让我们快速搭建项目。继续加油

发布手记

热门词条