Layui简介、下载、使用配置（超基础）

雨点打透心脏的1/2处 2023-06-12 09:10 10阅读 0赞

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

**Begin:**  
**layui官网：** https://www.layui.com/  
1.先打开官网  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70]  
2.点击下载文档：  
得到这样一个压缩包：  
![在这里插入图片描述][20191111194841629.png]  
3.解压：  
![在这里插入图片描述][20191111194905846.png]  
然后把上面名字是 **layui** 的文件夹直接拖拽（或者复制粘贴）到你的项目里面  
建议在 **WebContent**文件下建一个文件（例如：resources文件放进去，习惯问题）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 1]  
然后就是你新建的JSP代码了  
在WebConttent下new一个

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

<link rel="stylesheet" href="resources/layui/css/layui.css" media="all">
    <script src="resources/layui/layui.js" charset="utf-8"></script>

这是为了导入Layui库：  
注意图中的导入是相对地址（不懂的点[这里][Link 1]：）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 2]  
然后看官网的样例：[点这里][Link 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 3]  
[继续：][Link 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 4]  
[继续][Link 4]：你可以在这里看到效果以及查看源代码：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 5]  
**注意事项：** 最好复制boday内的，注意复制时里面的js代码，注意里面的导入的链接：一般在最开始或者最后。

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

学layui你得有这些基础：

![1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/201911111945387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[20191111194841629.png]: https://img-blog.csdnimg.cn/20191111194841629.png
[20191111194905846.png]: https://img-blog.csdnimg.cn/20191111194905846.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191111195046661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[Link 1]: https://baijiahao.baidu.com/s?id=1606046350230601762&wfr=spider&for=pc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191111200241109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[Link 2]: https://www.layui.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191111200934460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[Link 3]: https://www.layui.com/demo/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191111201037107.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[Link 4]: https://www.layui.com/demo/form.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191111201108420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzMyNw==,size_16,color_FFFFFF,t_70
[1]: https://img-blog.csdnimg.cn/20191111194001798.png