使用Layui快速创建页面

为什么使用Layui?

Layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写组织形式,门槛低,拿来即用,让不太了解前端配置的服务端人员也能只需面对浏览器本身,让一切所需要的元素与交互,从这里信手拈来。

一、Layui的目录结构

使用Layui快速创建页面Layui的目录结构如上图所示,包含css、font、images、lay、lay.js几大模块,它经过了自动化构建,更适合用于生产环境。

二、下载Layui

去## 标题官网下载layui layui官网链接

使用Layui快速创建页面

三、引用layui

  • 把下载后的layui解压,下图是layui文件目录。使用Layui快速创建页面
  • 引入项目目录,这里以spring boot的项目为例使用Layui快速创建页面
    把layui拉进了项目的静态文件夹里,如果用别的软件,把目录拉到自己需要的目录里。

四、使用layui

  • 这里我直接拉取了后台布局的全部代码粘贴到html,你们如果不用整个页面可以单独去示例里拉取需要的元素和组件。后台布局代码链接
    使用Layui快速创建页面
  • 注意修改页面头部的css和页面底部的js文件路径。
    使用Layui快速创建页面
    使用Layui快速创建页面

五、页面完成效果

使用Layui快速创建页面
一个基本的使用layui的页面就完成了。
The end~~~