layui版本v2.2.6
效果如下图:
html部分(含js调用)
<div class="login-main"> <header class="layui-elip">后台登录</header> <form class="layui-form-item" name="form1" method="post" action="login.php"> <div class="line1"> <input type="text" name="account" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input"> </div> <div class="line1"> <input type="password" name="pwd" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input"> </div> <div class="line1 login-btn"> <button type="submit" class="layui-btn" name="btn1" value="登录">登录</button> <button type="reset" class="layui-btn layui-btn-normal" name="btn2" value="重置">重置</button> </div> </form> </div> <script type="text/javascript"> layui.use('form', function () { var form = layui.form, $ = layui.jquery; }); </script>
css部分
@charset "utf-8"; * { margin: 0; padding: 0; } body { text-decoration: none; text-align: center; background: #23262E; } .login-main { margin: 0 auto; } .layui-elip { font-size: 24px; color: #fff; text-decoration: none; font-weight: bold; margin-top: 100px; margin-bottom: 30px; } .layui-form-item { margin: 0 auto; width: 190px; text-align: center; } .line1 { height: 50px; line-height: 50px; }