摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" type="text/css"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src ="static/layui/layui.js" ></script>
<style>
*{margin:0px;padding: 0px}
.login{width: 500px;margin: 100px auto;}
.logininfo{background:#fff;padding: 20px;border-radius: 5px;box-shadow: 5px 5px 20px #757575;}
</style>
</head>
<body style="background:#1E9FFF">
<div>
<div>
<form> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div style="color: gray">
<h2>后台管理系统</h2>
</div>
<hr>
<div>
<label>用户名</label>
<div>
<input type="text" placeholder="请输入用户名">
</div>
</div>
<div>
<label>密码</label>
<div>
<input type="text" placeholder="请输入密码">
</div>
</div>
<div>
<div>
<label>验证码</label>
<div>
<input >
</div>
<img src="static/layui/yz.png" alt="">
</div>
</div>
<div>
<div>
<button>立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>
layui提供的风格使前端工作更多元化，也会自带些多余的属性。得经过风格需求对自带属性适当调整才能使页面装饰得更加精美。
批改老师：韦小宝批改时间：2018-12-25 09:24:54
老师总结：layui还有很多强大的功能和组件呢！课后没事可以多看看哦！
