Layui 的导入，图标，element模块，form模块，laydate日期模块

## Layui 的导入，图标，element模块，form模块，laydate日期模块

Layui 的导入，图标，element模块，form模块，laydate日期模块

想用相关样式，必须指定class为相关样式才行

第一步，导入

1.创建resource包（WebContent下）

<link href="/WebContent/layui/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="/WebContent/layui/layui.js"></script>

图标

相关样式：layui-icon
使用方法1：采用 unicode 字符),其中的  即是图标对应的 unicode 字符

<div class="layui-icon">&#xe6c9;</div>

使用方法2：通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class

<i class="layui-icon layui-icon-face-smile"></i>  

按钮

相关样式：
必要样式：layui-icon，其他的看帮助文档就好链接: layui按钮文档跳转链接.

element模块

依赖 element 模块，必须要有加载的内容（参照下面的代码）否则无法进行功能性操作

<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
   
  var element = layui.element;
  //…
});
</script>

element-导航菜单

注意：导航
链接: layui导航文档跳转链接.
相关样式 水平（默认） 垂直（layui-nav-tree）
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
其他样式：

• layui-nav 表示这是一个导航栏
• layui-this 表示选中状态
  • layui-nav-item 表示这是一个导航栏的子项
    • layui-nav-child 子项目的子项目

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> 

element-Tab选项卡

**注意
链接: layui-Tab选项卡跳转链接.
相关样式 ：layui-tab
其他样式：

• layui-tab-title 表示表头
  • layui-this 表示选中状态
• layui-tab-content 表示内容容器
  • layui-tab-item 表示真正的内容
  • layui-show 内容的选中状态
    值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。

<div class="layui-tab">
  <ul class="layui-tab-title"