持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
1.下载layui源码
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范。其风格简约轻盈，而内在雅致丰盈，甚至包括文档在内的每一处细节都经过精心雕琢，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。
官网地址:layuion.com/
官方的布局示例demo
官方的表单示例demo
官方的分页示例demo
下载解压之后的文件目录结构为：
2.在webapp目录新增resources目录，用来存放layui源码
把刚才下载下来的layui目录拷贝到resources目录下
3.webapp新增login.html登录页面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/resources/layui/css/layui.css">
<style>
body{
background-color: #f2f2f2;
}
.oa-container{
background-color: white;
position: absolute;
width: 400px;
height: 350px;
top:50%;
left: 50%;
padding: 20px;
margin-left: -200px;
margin-top: -175px;
}
#username,#password{
text-align: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="oa-container">
<h1 style="text-align: center">测试</h1>
<form class="layui-form">
<div class="layui-form-item">
<input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<input id="password" type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div>
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
</div>
</form>
</div>
</body>
</html>
