layui使用方法—

layui使用方法

创建项目并引入layui

方法1 使用字符实体

方法2 使用样式

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图标</title><link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body>
<div class="layui-icon"></div><div class="layui-icon layui-icon-cellphone"></div>&amp;#xe6c9;<input type="text" value="&amp;#xe6c9;"><script src="resources/layui/layui.js"></script></body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内置图标</title><link rel="stylesheet" href="resources/layui/css/layui.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-color: #f2f2f2; color: #000;}</style>
</head>
<body><div class="site-title"><fieldset><legend><a name="table">内置图标一览表</a></legend></fieldset></div><ul class="site-doc-icon"><li><i class="layui-icon layui-icon-rate-half"></i><div class="doc-icon-name">半星</div><div class="doc-icon-code">&amp;#xe6c9;</div><div class="doc-icon-fontclass">layui-icon-rate-half</div></li><li><i class="layui-icon layui-icon-rate"></i><div class="doc-icon-name">星星-空心</div><div class="doc-icon-code">&amp;#xe67b;</div><div class="doc-icon-fontclass">layui-icon-rate</div></li><li><i class="layui-icon layui-icon-rate-solid"></i><div class="doc-icon-name">星星-实心</div><div class="doc-icon-code">&amp;#xe67a;</div><div class="doc-icon-fontclass">layui-icon-rate-solid</div></li><li><i class="layui-icon layui-icon-cellphone"></i><div class="doc-icon-name">手机</div><div class="doc-icon-code">&amp;#xe678;</div><div class="doc-icon-fontclass">layui-icon-cellphone</div></li><li><i class="layui-icon layui-icon-vercode"></i><div class="doc-icon-name">验证码</div><div class="doc-icon-code">&amp;#xe679;</div><div class="doc-icon-fontclass">layui-icon-vercode</div></li><li><i class="layui-icon layui-icon-login-wechat"></i><div class="doc-icon-name">微信</div><div class="doc-icon-code">&amp;#xe677;</div><div class="doc-icon-fontclass">layui-icon-login-wechat</div></li><li><i class="layui-icon layui-icon-login-qq"></i><div class="doc-icon-name">QQ</div><div class="doc-icon-code">&amp;#xe676;</div><div class="doc-icon-fontclass">layui-icon-login-qq</div></li><li><i class="layui-icon layui-icon-login-weibo"></i><div class="doc-icon-name">微博</div><div class="doc-icon-code">&amp;#xe675;</div><div class="doc-icon-fontclass">layui-icon-login-weibo</div></li><li><i class="layui-icon layui-icon-password"></i><div class="doc-icon-name">密码</div><div class="doc-icon-code">&amp;#xe673;</div><div class="doc-icon-fontclass">layui-icon-password</div></li><li><i class="layui-icon layui-icon-username"></i><div class="doc-icon-name">用户名</div><div class="doc-icon-code">&amp;#xe66f;</div><div class="doc-icon-fontclass">layui-icon-username</div></li><li><i class="layui-icon layui-icon-refresh-3"></i><div class="doc-icon-name">刷新-粗</div><div class="doc-icon-code">&amp;#xe9aa;</div><div class="doc-icon-fontclass">layui-icon-refresh-3</div></li>
<script src="resources/layui/layui.js"></script></body>
</html>

layui使用方法——图标相关推荐

layui添加阿里巴巴图标库
前言: layui是一款不错的前端框架,其官网上展示的图标有140个,当不够用的时候,我们就需要去扩展它的图标样式,今天为大家带来扩展方法,扩展后我们可以和layer官网中的示例一样,使用样式来生成图 ...
001-引入layui和layui.code方法
1. layui官方网址: https://www.layui.com/. 2. 点击立即下载按钮, 下载最新版的layui. 3. 下载完成layui-v2.5.7.zip. 4. 解压缩layui ...
layui引用外部图标
layui引用外部图标因为最近的项目中,layui自带的图标已经不能满足需求了,所以各种百度,有了以下成果: 1.选择阿里图标库中自己中意的图标,添加到购物车,从购物车中下载代码 2.下载完成后,解 ...
【Layui】layui 自定义icon 图标
layui 自定义icon 图标 Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢? 准备工作前提工作,自己下载好layui,注册 ...
layui下拉图标，layui排行号选择器
下载的组件 layui下拉图标 layui排行号选择器下载路径:https://gitee.com/ayscap/icon-selected 参考:https://gitee.com/layui-e ...
layui内置图标不满足需求，自定义添加阿里矢量图标
layui添加阿里矢量图标适用于layui内置图标不够用的情况 1.第一步进入阿里矢量图标官网,选择自己的图标,加入购物车,点击下载代码 2.第二部,解压下载的文件,复制所有内容,到项目中这里再 ...
关于layui的icon图标不显示的原因
如果你要使用layui原生的图标,但发现不显示可能是因为你把下载的layui文件中layui.css和layui.js单单提出来放到你的项目里了解决: 把文件中的Dist都引用过来
jQuery中的Ajax（基本语法、Ajax面试题、 layUI的方法级渲染）
1 基本语法 $.ajax({//请求类型get/post method:"post", //指定请求地址 url:"UserServlet", //发送给服务 ...
layui 输入框添加自定义图标
使用 layui 在输入框里添加自定义图标,layui 官网文档没有提供相关内容,但可以通过下面方式实现 1.准备好要使用的自定义图标如 Iconfont-阿里巴巴矢量图标库 https://www ...

layui使用方法——图标

layui使用方法

方法1 使用字符实体

layui使用方法——图标相关推荐

最新文章

热门文章