【教程】使⽤layui制作简单的登录界⾯
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>
javascript登录注册界面
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。