官网下载地址:

https://www.layui.com/

学习参考:

https://www.bilibili.com/video/BV1ct411n7SN

【Layui的文件结构】

我们只需要这个文件目录放到工程中去

目录结构:

css 样式文件
font 字体样式
image 图片样式
lay layui的核心模块
- - - - -
layui.all.js 已经把模块封装好了,不需要声明,直接使用
layui.js 使用模块需要声明

【学习目标】

- - - - - - - - - - - -
1、图标
2、按钮
3、导航菜单
4、选项卡
5、进度条
6、布局 & 面板
7、徽章(消息气泡)
8、时间轴
9、动画
- - - - - - - - - - - -
1、颜色选择器
2、滑块
3、评分
4、轮播图
5、代码修饰器
6、时间日期选择器
- - - - - - - - - - - -
1、表单元素
2、表单对象
3、弹出层
4、表格
5、文件上传
6、Dtree 树形组件

创建普通JavaEE项目并导入Layui组件

每个页面都需要引入资源:

<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/layui/css/layui.css">

<script src="${pageContext.request.contextPath}/resource/layui/layui.js"></script>

注意引入位置和脚本顺序

01、【图标 Icon】

使用方式一:使用字符实体配合类属性layui-icon实现

使用字符实体的方式必须被元素作为容器装填,

且class属性设置为“layui-icon”才能有效!

<i class="layui-icon"></i>

&amp;可用于对这些字符实体进行转义处理,浏览器将解析为文本值

&amp;#xe68f;

【注意图标的字符加了&】

使用方式二:使用类属性的赋值实现

<div class="layui-icon layui-icon-cellphone"></div>

手机图标:

也就是layui-icon的类属性基础上再添加附加属性

【更多样式】

在官方的文档手册中提供了非常多的样式可以选择:

https://www.layui.com/doc/element/icon.html

在视频中的CSS不能被访问,自己手敲:

        <style type="text/css">
.site-title {
margin : 30px 0 20px;
}
.site-title fieldset {
border : none;
padding : 0;
border-top : 1px solid #eee;
}
.site-title fieldset legend {
margin-left : 20px;
padding : 0 10px;
font-size : 22px;
font-weight: 300;
} .site-doc-icon {
margin-bottom: 50px;
font-size: 0;
}
.site-doc-icon li {
display : inline-block;
vertical-align : middle;
width : 127px;
height : 105px;
line-height : 25px;
padding : 20px 0;
margin-right : -1px;
margin-bottom : -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all .3s;
-webkit-transition: all .3s;
}
.site-doc-anim li {
height: auto;
}
.site-doc-icon li .layui-icon{
display: inline-block;
font-size: 36px;
}
.site-doc-icon li .doc-icon-name,
.site-doc-icon li .doc-icon-code {
color: #c2c2c2;
}
.site-doc-icon li .doc-icon-fontclass {
height: 40px;
line-height: 20px;
padding: 0 5px;
font-size: 13px;
color : #333;
}
.site-doc-icon li:hover {
background: #F2F2F2;
color: #000;
}
</style>

【Layui】02 图标 Icon的更多相关文章

  1. easyui中tree控件添加自定义图标icon

    来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...

  2. Expo大作战(十一)--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  3. Font Awesome-用CSS实现各种小图标icon

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...

  4. 百度地图-修改marker图标(icon)

    百度地图-修改marker图标(icon) 学习了:https://blog.csdn.net/clh604/article/details/9412291/ 源码膜拜: var map = new ...

  5. amazeui学习笔记--css(常用组件6)--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  6. 3D深色金属哥特3D项目工具小图标icon高清设计素材

    3D深色金属哥特3D项目工具小图标icon高清设计素材

  7. Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用

    原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...

  8. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  9. Unity_UIWidgets - 文字图标Icon

    Unity_UIWidgets - 文字图标Icon 文字图标Icon 开篇 不吐不快的废话 正题 主题Icon 获取Icon 第一步 第二步 第三步 使用Icon 1.导入至Resources文件夹 ...

  10. Material使用02 图标MdIconModule、矢量图作为图标使用及改进

    1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...

随机推荐

  1. WIN11 Windows 11 安装过程中如何跳过强制联网

    WIN11 Windows 11 安装过程中如何跳过强制联网.22H2. 在要求联网的页面中按下 "Shift+F10"调出命令行窗口,再输入"OOBE\BYPASSNR ...

  2. 非空处理 Java非空判断 非空处理及mysql数据库字段的not null

    1.mysql## 去掉非空,如果非空又没有默认值,这样程序在添加数据的时候i,如果没有设置值就会报错.该操作很危险.##ALTER TABLE `order_test` ADD COLUMN `te ...

  3. Spring Boot 使用 拦截器 实现 token 验证

    Spring Boot 使用 拦截器 实现 token 验证 整体思路:1.写一个工具类封装生成.校验和解析 token 的方法:2.在注册和登录时生成 token ,生成的 token 存入 red ...

  4. Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException

    Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderExcept ...

  5. cuda性能优化-2.访存优化

    简介 在CUDA程序中, 访存优化个人认为是最重要的优化项. 往往kernel会卡在数据传输而不是计算上, 为了最大限度利用GPU的计算能力, 我们需要根据GPU硬件架构对kernel访存进行合理的编 ...

  6. 结构型模式(Structural Pattern)

    模式介绍 结构型模式(Structural Pattern)的主要目的就是将不同的类和对象组合在一起,形成更大或者更复杂的结构体.该模式并不是简单地将这些类或对象摆放在一起,而是要提供它们之间的关联方 ...

  7. 如何将本地的项目,上传到github

    操作步骤: 1.github,创建一个仓库,复制仓库的地址 2.在要上传文件的目录,点击选择git bash here 3.输入[git clone],粘贴刚复制的仓库地址,clone成功后,会将仓库 ...

  8. hdu 5072 coprime不完整题解

    Problem Description There are n people standing in a line. Each of them has a unique id number. Now ...

  9. Vs生成后 自动压缩 删除多余xml

    setlocal enabledelayedexpansionset ProjectName=$(ProjectName)del /s /q /f "$(ProjectDir)bin\Deb ...

  10. SDL3 入门(4):选择图形引擎

    SDL2 创建渲染器时只能指定使用软件渲染还是硬件加速,无法选择使用哪种图形引擎实现硬件加速.SDL3 对此做了优化,可以在创建渲染器时指定 rendering driver 也就是图形引擎,比如在 ...