![001]()
Author：Exchanges
Version：9.0.1
一、引言
1.1 介绍
官网：https://www.layui.com/
https://www.layui.site/
在官网首页，可以很方便的下载LayUI
LayUI 是一款经典模块化前端 UI 框架，我们只需要定义简单的HTML、CSS、JS即可实现很复杂的前端效果。
使得前端页面的制作变得更加简单。
二、环境搭建
2.1 下载
在官网即可完成下载
| 下载LayUI |
|---|
![下载地址]() |
2.2 导入依赖
下载的LayUI解压后，将其中的layui目录导入项目中
| 解压后的 layui目录 |
|---|
![导入依赖]() |
| 将layui目录放到项目的webapp目录下 |
|---|
![导入依赖]() |
| 在JSP中导入layui依赖 |
|---|
![导入依赖3]() |
三、页面元素
3.1.栅格布局.html
响应式栅格布局，每行分 12 等分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>栅格系统</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
3.2.图标.html
class="layui-icon 具体的图标样式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
3.3.动画.html
LayUI提供了动画支持
| 样式类 | 描述 |
|---|
| layui-anim-up |
从最底部往上滑入 |
| layui-anim-upbit |
微微往上滑入 |
| layui-anim-scale |
平滑放大 |
| layui-anim-scaleSpring |
弹簧式放大 |
| layui-anim-fadein |
渐现 |
| layui-anim-fadeout |
渐隐 |
| layui-anim-rotate |
360度旋转 |
| 追加：layui-anim-loop |
循环动画 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
3.4.按钮.html
class="layui-btn 主题 样式"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<button type="button" class="layui-btn layui-btn-warm">添加</button>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-border-blue">跳转</a>
<button type="button" class="layui-btn">标准的按钮</button>
<a href="http://www.layui.com" class="layui-btn">可跳转的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm">主题的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-radius ">圆角的按钮</a>
<a href="http://www.layui.com" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius ">
<i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #1E9FFF;"></i>
带图标的按钮
</a>
</body>
</html>
3.5.表单.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<script src="layui/layui.js"></script>
<body>
<form class="layui-form" action="http://www.baidu.com">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="on" 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>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4"
