欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Layui简介、下载、使用配置(超基础)

程序员文章站 2022-07-13 16:19:12
...

layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。

Begin:
layui官网: https://www.layui.com/
1.先打开官网
Layui简介、下载、使用配置(超基础)
2.点击下载文档:
得到这样一个压缩包:
Layui简介、下载、使用配置(超基础)
3.解压:
Layui简介、下载、使用配置(超基础)
然后把上面名字是 layui 的文件夹直接拖拽(或者复制粘贴)到你的项目里面
建议在 WebContent文件下建一个文件(例如:resources文件放进去,习惯问题)
Layui简介、下载、使用配置(超基础)
然后就是你新建的JSP代码了
在WebConttent下new一个

然后在你的jsp页面加入以下代码引用:

<!-- 注意,如果你的layui拖进来的方式和我一样就这样写 -->
<link rel="stylesheet" href="resources/layui/css/layui.css" media="all">
<script src="resources/layui/layui.js" charset="utf-8"></script>

这是为了导入Layui库:
注意图中的导入是相对地址(不懂的点这里:)
Layui简介、下载、使用配置(超基础)
然后看官网的样例:点这里
Layui简介、下载、使用配置(超基础)
继续:
Layui简介、下载、使用配置(超基础)
继续:你可以在这里看到效果以及查看源代码:

Layui简介、下载、使用配置(超基础)
注意事项: 最好复制boday内的,注意复制时里面的js代码,注意里面的导入的链接:一般在最开始或者最后。

然后你就可以成功的在本地打开这个框架的样例了。

学layui你得有这些基础:

Layui简介、下载、使用配置(超基础)

纯粹的简单指导 毕竟我也只是小白:不懂得可以留言 一起学习。
大佬请略过(0鞠躬0)