使用Layui框架的简单web界面开发

Layui的简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

优势

优势在于他是国产的（由国内大佬编写的），很适合我们国人使用，其主要优势在于以下几个方面：

1. 安装方便，等等会讲，很简单。人家已经帮你封装好了，只要把文件放到你页面所在目录就可以了；
2. 使用方便，为什么说使用方便能因为根本不需要担心你做的东西会很丑，因为别人已经将模板固定好了，像我们平时要写个像样的网页，都比不可少的的就是样式控制文件如（css ，js，还有一些字体文件什么的），人家都帮你封装好了，用就是了。自己还要写样式文件多麻烦呀，当然这只是对后端的开发人员说的。跟专业的前端开发是没法比的，毕竟人家投入更多的资金而且有专业的美工布局；
3. 功能齐全，这个是最重要的，功能不齐全，使用再方便也没人会用嘛，功能是真的多，里面包含经常用到，却又不想写样式的组件样式。如弹窗层，表单，按钮，导航，选项卡 ，还有内置的图标 等等。最适合的，就是不喜欢在前端下功夫的后端人员了；

框架的安装

首先你要先进入Layui的官网
链接: link
这个就是首页，一看就很简洁

点击下载，打开文件（可以看到里面的样式文件，里面包含css ，js，字体文件，）

这边主要介绍的是iconfont.ttf文件，里面有很多icon图标，那咋办怎嘛知道图标长啥样

这边我在介绍一个网站了
http://blog.luckly-mjw.cn/tool-show/iconfont-preview/index.html

解析一下文件想用哪个图标就复制哪个

具体的运用也非常简单，直接调用样式，输入编码就好了

还有一个重点，编码有两种，
&#开头的是十进制编码
&#x开头的十六进制编码
转换就是把后面数字进行进制转换就好了

回归正题 ，将下好的文件，放到自己的页面开发的对应目录即可（这里就不截图了）

使用方法

https://www.layui.com/doc/
上面网址讲得很清楚，里面还有包括封装结构。

还有对应的示例代码

加载样式完，使用组件就会改变成简约的风格。

其实我最看好的是其弹出层的样式之多（他也可以单独的分离，叫做layer）

我大概展示我的样例（这边有引用到腾讯天气，本人解释没有商用）