摘要：用layui可以快速搭建样式，当使用layui样式时用文件前面要引用layui的css文件和js脚本；css的文件次序会影响页面的样式，可以将layui.css的引入置前，避免影响后续样式。<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css"> <s
用layui可以快速搭建样式，当使用layui样式时用文件前面要引用layui的css文件和js脚本；css的文件次序会影响页面的样式，可以将layui.css的引入置前，避免影响后续样式。
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css"> <script style="text/javascript" href="layui-v2.4.5/layui/layui.js">
使用layui的表单样式，表单首先要设置class="layui-form"
案例;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="layui-v2.4.5/layui/css/layui.css"><!-- 引入核心库 -->
<script style="text/javascript" href="layui-v2.4.5/layui/layui.js"></script><!-- 引入核心库 -->
<style>
.login_form{width: 450px;height: 300px;margin:270px auto 0px;background: #FCF9F6;border-radius: 4px;box-shadow: 5px 5px 20px #4444; padding: 20px;}
</style>
</head>
<body style="background:#3676A2;">
<div>
<form action=""><!-- 使用layui样式的表单要设置class="layui-form" -->
<div style="color:#ccc;"><!-- 用<h2>设置表头 -->
<h2>后台登入系统</h2>
</div>
<hr>
<div>
<label>账户名</label>
<div>
<input type="text" lay-verify="required" placeholder="请输入账户名" >
</div>
</div>
<div>
<label>密码</label>
<div>
<input type="password" lay-verify="required" placeholder="请输入密码" >
</div>
</div>
<div>
<label>验证码</label>
<div>
<input type="text" name="email" lay-verify="email" autocomplete="off">
</div>
</div>
<div>
<div>
<button lay-submit="" lay-filter="demo1">登录</button>
</div>
</div>
</form>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-16 16:33:47
老师总结：嗯！不错！代码很完整！layui框架中还有很多好用的组件呢！课后可以多看看！
