初识Layui
2020-03-27 本文已影响0人
小疏林er
1、简介
layui是由国人开发的一款、更多的面向于后端开发人员的轻量级开源的模块化前端 UI 框架。她提供了非常丰富的内置模块和页面元素，简约时尚的风格较为适合开发对网页样式无特殊要求的开发周期短的小型网站。
2、下载
下载路径：https://www.layui.com/
官方文档：https://www.layui.com/doc/
结构目录.png
3、环境导入
将下载好的开发包复制进项目中，并导入layui.js、layui.css文件，部分内置模块依赖jQuery，需要时也要导入进来。
<!--本地导入layui.js文件（导js文件用<script ></script>标签）-->
<script type="text/javascript" src="layui/layui.js" ></script>
<!--本地导入layui.css文件（导入css文件用<link />标签）-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
4、测试页面元素---字体图标
layui图标并非是图片，而是以字体形式存在，意味着你可以通过css控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。需要什么图标直接去官网查询，粘贴到代码中即可。
使用方式:
通过对一个内联元素（一般推荐用 i标签、span标签也可）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class或者unicode（注意：layui 2.3.0 之前只支持采用 unicode 字符,以后的版本两种都支持)，即可显示出你想要的图标。
部分图标样图.png
字体图标官方文档地址:https://www.layui.com/doc/element/icon.html
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试图标</title>
<!--本地导入layui.js文件（导js文件用<script ></script>标签）-->
<script type="text/javascript" src="layui/layui.js" ></script>
<!--本地导入layui.css文件（导入css文件用<link />标签）-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<style>
#div1{
/*上部外边距100px*/
margin-top:100px;
/*内容居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<!--通过添加font-class的形式定义图标-->
<i class="layui-icon layui-icon-heart-fill"></i>
<!--通过设置 unicode 来定义图标2.3.0版本以前-->
<i class="layui-icon"></i>
<!--设置图标颜色-->
<i class="layui-icon"style="color: #00F7DE;"></i>
<!--设置图标尺寸-->
<i class="layui-icon"style="font-size: 50px;"></i>
<!--混合使用，属性之间用分号隔开-->
<i class="layui-icon"style="font-size: 40px;color: #009688;"></i>
<!--<span></span>也可以定义图标-->
<span class="layui-icon "></span>
</div>
</body>
</html>
测试效果：
测试效果图.png
