【Layui】02 图标 Icon
官网下载地址:
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>
&可用于对这些字符实体进行转义处理,浏览器将解析为文本值
&#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的更多相关文章
- easyui中tree控件添加自定义图标icon
来源于:http://blog.163.com/lintianhuanhai@126/blog/static/165587366201421704420256/ <!DOCTYPE html&g ...
- Expo大作战(十一)--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- Font Awesome-用CSS实现各种小图标icon
Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...
- 百度地图-修改marker图标(icon)
百度地图-修改marker图标(icon) 学习了:https://blog.csdn.net/clh604/article/details/9412291/ 源码膜拜: var map = new ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- 3D深色金属哥特3D项目工具小图标icon高清设计素材
3D深色金属哥特3D项目工具小图标icon高清设计素材
- Jetpack Compose学习(3)——图标(Icon) 按钮(Button) 输入框(TextField) 的使用
原文地址: Jetpack Compose学习(3)--图标(Icon) 按钮(Button) 输入框(TextField) 的使用 | Stars-One的杂货小窝 本篇分别对常用的组件:图标(Ic ...
- 字体图标Icon Font
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...
- Unity_UIWidgets - 文字图标Icon
Unity_UIWidgets - 文字图标Icon 文字图标Icon 开篇 不吐不快的废话 正题 主题Icon 获取Icon 第一步 第二步 第三步 使用Icon 1.导入至Resources文件夹 ...
- Material使用02 图标MdIconModule、矢量图作为图标使用及改进
1 MdIconModule模块的使用 1.1 在需要用到的模块中引入Material图标模块 import { BrowserModule } from '@angular/platform-bro ...
随机推荐
- WIN11 Windows 11 安装过程中如何跳过强制联网
WIN11 Windows 11 安装过程中如何跳过强制联网.22H2. 在要求联网的页面中按下 "Shift+F10"调出命令行窗口,再输入"OOBE\BYPASSNR ...
- 非空处理 Java非空判断 非空处理及mysql数据库字段的not null
1.mysql## 去掉非空,如果非空又没有默认值,这样程序在添加数据的时候i,如果没有设置值就会报错.该操作很危险.##ALTER TABLE `order_test` ADD COLUMN `te ...
- Spring Boot 使用 拦截器 实现 token 验证
Spring Boot 使用 拦截器 实现 token 验证 整体思路:1.写一个工具类封装生成.校验和解析 token 的方法:2.在注册和登录时生成 token ,生成的 token 存入 red ...
- Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException
Java服务发起HTTPS请求报错:PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderExcept ...
- cuda性能优化-2.访存优化
简介 在CUDA程序中, 访存优化个人认为是最重要的优化项. 往往kernel会卡在数据传输而不是计算上, 为了最大限度利用GPU的计算能力, 我们需要根据GPU硬件架构对kernel访存进行合理的编 ...
- 结构型模式(Structural Pattern)
模式介绍 结构型模式(Structural Pattern)的主要目的就是将不同的类和对象组合在一起,形成更大或者更复杂的结构体.该模式并不是简单地将这些类或对象摆放在一起,而是要提供它们之间的关联方 ...
- 如何将本地的项目,上传到github
操作步骤: 1.github,创建一个仓库,复制仓库的地址 2.在要上传文件的目录,点击选择git bash here 3.输入[git clone],粘贴刚复制的仓库地址,clone成功后,会将仓库 ...
- hdu 5072 coprime不完整题解
Problem Description There are n people standing in a line. Each of them has a unique id number. Now ...
- Vs生成后 自动压缩 删除多余xml
setlocal enabledelayedexpansionset ProjectName=$(ProjectName)del /s /q /f "$(ProjectDir)bin\Deb ...
- SDL3 入门(4):选择图形引擎
SDL2 创建渲染器时只能指定使用软件渲染还是硬件加速,无法选择使用哪种图形引擎实现硬件加速.SDL3 对此做了优化,可以在创建渲染器时指定 rendering driver 也就是图形引擎,比如在 ...