Layui的简介

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

优势

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

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

框架的安装

首先你要先进入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）

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

使用Layui框架的简单web界面开发相关推荐

数据库前台界面设计html,简单Web界面开发（数据库）
(1)首先配置好eclipse 和 SQL server 2016 的环境,下载sqljdbc4.jar.(我的eclipse是eclipse Neon ) (2)创建新的数据库 (3)创建java ...
OpenWRT - WEB界面开发思路和基本方法
想要对OpenWRT的WEB界面(*下称界面)进行修改.修改的目标是: 1.修改页面的样式,设计为企业的风格(stylesheet) 2.新建自己的功能,实现访问页面后,用户就可以对配置文件(也就是 ...
基于Golang的简单web服务程序开发——CloudGo
基于Golang的简单web服务程序开发--CloudGo[阅读时间:约10分钟] 一.概述二.系统环境&项目介绍 1.系统环境 2.项目的任务要求 (1)基本要求 (2)扩展要求三.具体 ...
移动端web界面开发
根据2017年大公司的市场分析报告,移动端用户上网人数和上网时间已经突飞猛进,相信在5G的环境中,更多人会选择便捷的移动端进行浏览网页获取信息.移动端界面开发也更加重要. 移动端网页前端开发和传统PC ...
layui框架的简单使用
layui框架 1.使用去官网下载文件,利用layui自己生成的css和js来使用官网 Layui 开发使用文档 - 入门指南引入layui.css <link rel="sty ...
android开发模仿文件管理器_2020 Web界面开发：DevExtreme全新的Diagram控件、文件管理器...
DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110+种UI控件,DevExpress ASP.NET MVC Extensions是服务器 ...
OPPO官网web界面开发案例
成品一.框架实现构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架,然后再逐步构建每一部分. i ...
前端工程师需要学习ps 吗_转行学习web前端开发，需要哪些工具和需要学习什么？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...

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

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

Layui的简介

优势

框架的安装

使用方法

使用Layui框架的简单web界面开发相关推荐

最新文章

热门文章