摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录界面</title>
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css">
<script src="layui-v2.4.5/layui/layui.js"></script>
<style>
body{
background-color:#0491FF;
}
.login_bigbox{
width:500px;
margin:200px auto 0px;
background-color:white;
}
.login_twobox{
padding:20px;
border-radius: 5px;
box-shadow: 5px 5px 20px #444444;
}
.layui-form-item> h2{
color:gray;
}
</style>
</head>
<body>
<div class="login_bigbox">
<div class="login_twobox">
<form action="#" method="post" class="layui-form">
<div class="layui-form-item">
<h2>
后台管理系统
</h2>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" required lay-verify="required" placeholder="请输入用户名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
</div>
<img src="yz.png" alt="验证码">
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-20 09:06:54
老师总结：使用layui来进行登录页面的搭建还是很简单的 使用layui中原有的页面元素搭建起来很快捷 并且样式也不丑
