layui使用方法——图标
生活随笔
收集整理的這篇文章主要介紹了
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>&#xe6c9;<input type="text" value="&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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的学习内容
- 下一篇： layui——按钮