Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
ico.htm37KB
<#def title = "图片图标"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "“图片图标”是把一组小图标图片拼成一张大图，通过CSS的background-position特性指定小图标在大图中的位置和宽高显示图标，"/>
<#def prevUrl = "font.htm"/>
<#def nextUrl = "text.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "css", "ico")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "图片图标")}
<div class="content">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
<p class="z-text-blue">什么是“图片图标”？</p>
<p class="z-color-333" style="text-indent:38px;">
“图片图标”是把一组小图标图片拼成一张大图，通过CSS的background-position特性指定小图标在大图中的位置和宽高显示图标，
知启蒙图片图标放在/service/res/image目录下，根据大小和类型分为12px、16px、22px、36px以及文件图标、树图标等，在这里还利用三角型和圆型生成箭头和圆圈等样式。
</p>
</div>
<#-- 操作类 -->
<div class="tutorial title">一、文件类型图标，共九个</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
<td width="26%">样式</td>
<td width="40%">编码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-word</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-word"></i>
</pre>
</td>
<td><i class="z-ico z-file z-word"></i></td>
<td>word图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-image</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-image"></i>
</pre>
</td>
<td><i class="z-ico z-file z-image"></i></td>
<td>图片图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-pdf</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-pdf"></i>
</pre>
</td>
<td><i class="z-ico z-file z-pdf"></i></td>
<td>pdf图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-video</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-video"></i>
</pre>
</td>
<td><i class="z-ico z-file z-video"></i></td>
<td>影像图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-music</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-music"></i>
</pre>
</td>
<td><i class="z-ico z-file z-music"></i></td>
<td>音乐图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-text</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-text"></i>
</pre>
</td>
<td><i class="z-ico z-file z-text"></i></td>
<td>文本图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-list</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-list"></i>
</pre>
</td>
<td><i class="z-ico z-file z-list"></i></td>
<td>列表图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-android</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-android"></i>
</pre>
</td>
<td><i class="z-ico z-file z-android"></i></td>
<td>安卓图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-file.z-png</td>
<td><pre class="z-text-preline">
<i class="z-ico z-file z-png"></i>
</pre>
</td>
<td><i class="z-ico z-file z-png"></i></td>
<td>图像文件图标</td>
</tr>
</table>
</table>
<#-- 对话框图标 -->
<div class="tutorial title">二、对话框图标，共六个</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
<td width="26%">样式</td>
<td width="40%">编码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-confirm</td>
<td><pre class="z-text-preline">
<i class="z-ico z-confirm"></i>
</pre>
</td>
<td><i class="z-ico z-confirm"></i></td>
<td>确认图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-loading</td>
<td><pre class="z-text-preline">
<i class="z-ico z-alert"></i>
</pre>
</td>
<td><i class="z-ico z-alert"></i></td>
<td>警告图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-loading</td>
<td><pre class="z-text-preline">
<i class="z-ico z-loading"></i>
</pre>
</td>
<td><i class="z-ico z-loading"></i></td>
<td>加载图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-loading.z-small</td>
<td><pre class="z-text-preline">
<i class="z-ico z-loading z-small"></i>
</pre>
</td>
<td><i class="z-ico z-loading z-small"></i></td>
<td>加载小图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-pen</td>
<td><pre class="z-text-preline">
<i class="z-ico z-pen"></i>
</pre>
</td>
<td><i class="z-ico z-pen"></i></td>
<td>修改图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-close.z-small</td>
<td><pre class="z-text-preline">
<i class="z-ico z-close z-small"></i>
</pre>
</td>
<td><i class="z-ico z-close z-small"></i></td>
<td>关闭图标</td>
</tr>
</table>
<#-- 树形图标16px*22px -->
<div class="tutorial title">三、树型图标(16px * 22px)，一组反白，一组正常，默认反白，正常加z-normal样式</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
<td width="26%">名称</td>
<td width="40%">代码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree"></i>
</pre>
</td>
<td><i class="z-ico z-tree"></i></td>
<td>树形目录图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-root</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-root"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-root"></i></td>
<td>树形根节点图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-lastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-lastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-lastnode"></i></td>
<td>指向下一个节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-mlastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-mlastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-mlastnode"></i></td>
<td>点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-mnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-mnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-mnode"></i></td>
<td>中间节点，点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-node</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-node"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-node"></i></td>
<td>指向节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-plastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-plastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-plastnode"></i></td>
<td>点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-pnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-pnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-pnode"></i></td>
<td>中间节点，点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-vertline</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-vertline"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-vertline"></i></td>
<td>树形垂直线</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-blank</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-blank"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-blank"></i></td>
<td>树形空白符</td>
</tr>
<tr><td colspan="4" class="zi-text-cyan">标准树形图标</td></tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-root.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-root z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-root z-normal"></i></td>
<td>树形根节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-lastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-lastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-lastnode z-normal"></i></td>
<td>指向下一节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-mlastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-mlastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-mlastnode z-normal"></i></td>
<td>点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-mnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-mnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-mnode z-normal"></i></td>
<td>中间节点，点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-node.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-node z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-node z-normal"></i></td>
<td>指向节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-plastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-plastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-plastnode z-normal"></i></td>
<td>点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-pnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-pnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-pnode z-normal"></i></td>
<td>中间节点，点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-vertline.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-vertline z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-vertline z-normal"></i></td>
<td>树形垂直线</td>
</tr>
<tr bgcolor="#f5f5f5">
<td colspan="4">名称</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-root</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-root"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-root"></i></td>
<td>树形根节点图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-lastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-lastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-lastnode"></i></td>
<td>指向下一个节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-mlastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-mlastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-mlastnode"></i></td>
<td>点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-mnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-mnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-mnode"></i></td>
<td>中间节点，点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-node</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-node"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-node"></i></td>
<td>指向节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-plastnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-plastnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-plastnode"></i></td>
<td>点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-pnode</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-pnode"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-pnode"></i></td>
<td>中间节点，点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-vertline</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-vertline"></i>
</pre>
</td>
<td class="z-bg-black"><i class="z-ico z-tree z-30 z-vertline"></i></td>
<td>树形垂直线</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-blank</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-blank"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-blank"></i></td>
<td>树形空白符</td>
</tr>
<tr><td colspan="4" class="zi-text-cyan">标准树形图标</td></tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-root.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-root z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-root z-normal"></i></td>
<td>树形根节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-lastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-lastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-lastnode z-normal"></i></td>
<td>指向下一节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-mlastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-mlastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-mlastnode z-normal"></i></td>
<td>点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-mnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-mnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-mnode z-normal"></i></td>
<td>中间节点，点击后展开菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-node.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-node z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-node z-normal"></i></td>
<td>指向节点</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-plastnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-plastnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-plastnode z-normal"></i></td>
<td>点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-pnode.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-pnode z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-pnode z-normal"></i></td>
<td>中间节点，点击后收起菜单</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-30.z-vertline.z-normal</td>
<td><pre class="z-text-preline">
<i class="z-ico z-tree z-30 z-vertline z-normal"></i>
</pre>
</td>
<td><i class="z-ico z-tree z-30 z-vertline z-normal"></i></td>
<td>树形垂直线</td>
</tr>
</table>
<#-- 常用小图标16px*16px -->
<div class="tutorial title">四、常用树型菜单中小图标(16px * 16px)</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
<td width="26%">名称</td>
<td width="40%">代码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-item</td>
<td><pre><i class="z-ico z-tree z-item"></i></pre></td>
<td><i class="z-ico z-tree z-item"></i></td>
<td>子节点图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tr z-tree z-30oup</td>
<td><pre><i class="z-ico z-tree z-group"></i></pre></td>
<td><i class="z-ico z-tree z-group"></i></td>
<td>组图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-attribute</td>
<td><pre><i class="z-ico z-tree z-attribute"></i></pre></td>
<td><i class="z-ico z-tree z-attribute"></i></td>
<td>属性图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-note</td>
<td><pre><i class="z-ico z-tree z-note"></i></pre></td>
<td><i class="z-ico z-tree z-note"></i></td>
<td>便笺图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-user</td>
<td><pre><i class="z-ico z-tree z-user"></i></pre></td>
<td><i class="z-ico z-tree z-user"></i></td>
<td>用户图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-close</td>
<td><pre><i class="z-ico z-tree z-close"></i></pre></td>
<td><i class="z-ico z-tree z-close"></i></td>
<td>文件夹图标，关闭状态</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-open</td>
<td><pre><i class="z-ico z-tree z-open"></i></pre></td>
<td><i class="z-ico z-tree z-open"></i></td>
<td>文件夹图标，打开状态</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-search</td>
<td><pre><i class="z-ico z-tree z-search"></i></pre></td>
<td><i class="z-ico z-tree z-search"></i></td>
<td>文件夹图标，搜索状态</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-briefcase</td>
<td><pre><i class="z-ico z-tree z-briefcase"></i></pre></td>
<td><i class="z-ico z-tree z-briefcase"></i></td>
<td>公文包图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-users</td>
<td><pre><i class="z-ico z-tree z-users"></i></pre></td>
<td><i class="z-ico z-tree z-users"></i></td>
<td>多用户图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-pass</td>
<td><pre><i class="z-ico z-tree z-pass"></i></pre></td>
<td><i class="z-ico z-tree z-pass"></i></td>
<td>钥匙图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-auth</td>
<td><pre><i class="z-ico z-tree z-auth"></i></pre></td>
<td><i class="z-ico z-tree z-auth"></i></td>
<td>认证图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-address</td>
<td><pre><i class="z-ico z-tree z-address"></i></pre></td>
<td><i class="z-ico z-tree z-address"></i></td>
<td>地址图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-exit</td>
<td><pre><i class="z-ico z-tree z-exit"></i></pre></td>
<td><i class="z-ico z-tree z-exit"></i></td>
<td>出口图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-help</td>
<td><pre><i class="z-ico z-tree z-help"></i></pre></td>
<td><i class="z-ico z-tree z-help"></i></td>
<td>帮助图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-network</td>
<td><pre><i class="z-ico z-tree z-network"></i></pre></td>
<td><i class="z-ico z-tree z-network"></i></td>
<td>网络图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-recycle</td>
<td><pre><i class="z-ico z-tree z-recycle"></i></pre></td>
<td><i class="z-ico z-tree z-recycle"></i></td>
<td>回收站图标</td>
</tr>
<tr>
<td class="z-samp">.z-ico.z-tree.z-internet</td>
<td><pre><i class="z-ico z-tree z-internet"></i></pre></td>
<td><i class="z-ico z-tree z-internet"></i></td>
<td>互联网图标</td>
</tr>
</table>
<#-- 五、箭头定义（三角型样式） -->
<div class="tutorial title">五、箭头定义（三角型样式）</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr bgcolor="#f5f5f5">
<td width="26%">名称</td>
<td width="40%">代码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-arrow</td>
<td><pre class="z-text-preline"><i class="z-arrow"></i></pre></td>
<td><i class="z-arrow"></i></td>
<td>默认4像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up</td>
<td><pre><i class="z-arrow z-up"></i></pre></td>
<td><i class="z-arrow z-up"></i></td>
<td>4像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left</td>
<td><pre><i class="z-arrow z-left"></i></pre></td>
<td><i class="z-arrow z-left"></i></td>
<td>4像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right</td>
<td><pre><i class="z-arrow z-right"></i></pre></td>
<td><i class="z-arrow z-right"></i></td>
<td>4像素向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-px5</td>
<td><pre><i class="z-arrow z-px5"></i></pre></td>
<td><i class="z-arrow z-px5"></i></td>
<td>5像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up.z-px5</td>
<td><pre><i class="z-arrow z-up z-px5"></i></pre></td>
<td><i class="z-arrow z-up z-px5"></i></td>
<td>5像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left.z-px5</td>
<td><pre><i class="z-arrow z-left z-px5"></i></pre></td>
<td><i class="z-arrow z-left z-px5"></i></td>
<td>5像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right.z-px5</td>
<td><pre><i class="z-arrow z-right z-px5"></i></pre></td>
<td><i class="z-arrow z-right z-px5"></i></td>
<td>5像素向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-px8</td>
<td><pre><i class="z-arrow z-px8"></i></pre></td>
<td><i class="z-arrow z-px8"></i></td>
<td>8像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up.z-px8</td>
<td><pre><i class="z-arrow z-up z-px8"></i></pre></td>
<td><i class="z-arrow z-up z-px8"></i></td>
<td>8像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left.z-px8</td>
<td><pre><i class="z-arrow z-left z-px8"></i></pre></td>
<td><i class="z-arrow z-left z-px8"></i></td>
<td>8像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right.z-px8</td>
<td><pre><i class="z-arrow z-right z-px8"></i></pre></td>
<td><i class="z-arrow z-right z-px8"></i></td>
<td>8像素向右</td>
</tr>
<tr><td colspan="4" class="zi-text-cyan">镂空箭头</td></tr>
<tr>
<td class="z-samp">.z-arrow span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-relative-left"><span></span></i></td>
<td>镂空4像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-up z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-up z-relative-left"><span></span></i></td>
<td>镂空4像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-left z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-left z-relative-left"><span></span></i></td>
<td>镂空4像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-right z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-right z-relative-left"><span></span></i></td>
<td>镂空4像素向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-px5 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-px5 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-px5 z-relative-left"><span></span></i></td>
<td>镂空5像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-up z-px5 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-up z-px5 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-up z-px5 z-relative-left"><span></span></i></td>
<td>镂空5像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-left z-px5 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-left z-px5 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-left z-px5 z-relative-left"><span></span></i></td>
<td>镂空5像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-right z-px5 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-right z-px5 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-right z-px5 z-relative-left"><span></span></i></td>
<td>镂空5像素向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-px8 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-px8 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-px8 z-relative-left"><span></span></i></td>
<td>镂空8像素向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-up z-px8 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-up z-px8 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-up z-px8 z-relative-left"><span></span></i></td>
<td>镂空8像素向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-left z-px8 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-left z-px8 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-left z-px8 z-relative-left"><span></span></i></td>
<td>镂空8像素向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow z-right z-px8 span</td>
<td><pre class="z-text-preline"><i class="z-arrow z-right z-px8 z-relative-left"><span></span></i></pre></td>
<td><i class="z-arrow z-right z-px8 z-relative-left"><span></span></i></td>
<td>镂空8像素向右</td>
</tr>
<tr><td colspan="4" class="zi-text-cyan">箭头颜色</td></tr>
<tr>
<td class="z-samp">.z-arrow.z-gray</td>
<td><pre><i class="z-arrow z-gray"></i></pre></td>
<td><i class="z-arrow z-gray"></i></td>
<td>默认4像素灰色向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up.z-gray</td>
<td><pre><i class="z-arrow z-up z-gray"></i></pre></td>
<td><i class="z-arrow z-up z-gray"></i></td>
<td>4像素灰色向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left.z-gray</td>
<td><pre><i class="z-arrow z-left z-gray"></i></pre></td>
<td><i class="z-arrow z-left z-gray"></i></td>
<td>4像素灰色向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right.z-gray</td>
<td><pre><i class="z-arrow z-right z-gray"></i></pre></td>
<td><i class="z-arrow z-right z-gray"></i></td>
<td>4像素灰色向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-px5.z-gray</td>
<td><pre><i class="z-arrow z-px5 z-gray"></i></pre></td>
<td><i class="z-arrow z-px5 z-gray"></i></td>
<td>5像素灰色向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up.z-px5.z-gray</td>
<td><pre><i class="z-arrow z-up z-px5 z-gray"></i></pre></td>
<td><i class="z-arrow z-up z-px5 z-gray"></i></td>
<td>5像素灰色向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left.z-px5.z-gray</td>
<td><pre><i class="z-arrow z-left z-px5 z-gray"></i></pre></td>
<td><i class="z-arrow z-left z-px5 z-gray"></i></td>
<td>5像素灰色向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right.z-px5.z-gray</td>
<td><pre><i class="z-arrow z-right z-px5 z-gray"></i></pre></td>
<td><i class="z-arrow z-right z-px5 z-gray"></i></td>
<td>5像素灰色向右</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-px8.z-gray</td>
<td><pre><i class="z-arrow z-px8 z-gray"></i></pre></td>
<td><i class="z-arrow z-px8 z-gray"></i></td>
<td>8像素灰色向下</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-up.z-px8.z-gray</td>
<td><pre><i class="z-arrow z-up z-px8 z-gray"></i></pre></td>
<td><i class="z-arrow z-up z-px8 z-gray"></i></td>
<td>8像素灰色向上</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-left.z-px8.z-gray</td>
<td><pre><i class="z-arrow z-left z-px8 z-gray"></i></pre></td>
<td><i class="z-arrow z-left z-px8 z-gray"></i></td>
<td>8像素灰色向左</td>
</tr>
<tr>
<td class="z-samp">.z-arrow.z-right.z-px8.z-gray</td>
<td><pre><i class="z-arrow z-right z-px8 z-gray"></i></pre></td>
<td><i class="z-arrow z-right z-px8 z-gray"></i></td>
<td>8像素灰色向右</td>
</tr>
<tr><td colspan="4" class="zi-text-cyan">向上下、置顶底箭头图标 </td></tr>
<tr>
<td class="z-samp">.z-arrow-move</td>
<td><pre><i class="z-arrow-move"></i></pre></td>
<td><i class="z-arrow-move"></i></td>
<td>上移</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-bottom</td>
<td><pre><z-arrow-move z-bottom"></i></pre></td>
<td><i class="z-arrow-move z-bottom"></i></td>
<td>下移</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-up</td>
<td><pre><i class="z-arrow-move z-up"></i></pre></td>
<td><i class="z-arrow-move z-up"></i></td>
<td>上移,无横线</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-down</td>
<td><pre><i class="z-arrow-move z-down"></i></pre></td>
<td><i class="z-arrow-move z-down"></i></td>
<td>下移,无横线</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-top.z-disabled</td>
<td><pre><i class="z-arrow-move z-top z-disabled"></i></pre></td>
<td><i class="z-arrow-move z-top z-disabled"></i></td>
<td>上移，灰色</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-bottom.z-disabled</td>
<td><pre><z-arrow-move z-bottom z-disabled"></i></pre></td>
<td><i class="z-arrow-move z-bottom z-disabled"></i></td>
<td>下移，灰色</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-up.z-disabled</td>
<td><pre><i class="z-arrow-move z-up z-disabled"></i></pre></td>
<td><i class="z-arrow-move z-up z-disabled"></i></td>
<td>上移,无横线，灰色</td>
</tr>
<tr>
<td class="z-samp">.z-arrow-move.z-down.z-disabled</td>
<td><pre><i class="z-arrow-move z-down z-disabled"></i></pre></td>
<td><i class="z-arrow-move z-down z-disabled"></i></td>
<td>下移,无横线,灰色</td>
</tr>
</table>
<#-- 六、圆圈圆角定义（radius） -->
<div class="tutorial title">六、圆圈圆角定义（radius）</div>
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
<tr>
<td colspan="4" class="zi-text-cyan">圆圈圆角定义</td>
<tr bgcolor="#f5f5f5">
<td width="26%">名称</td>
<td width="40%">代码</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-white</td>
<td><pre><i class="z-round z-white"></i></pre></td>
<td class="z-bg-black"><i class=" z-round z-white"></i></td>
<td>白色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black</td>
<td><pre><i class="z-round z-black"></i></pre></td>
<td><i class=" z-round z-black"></i></td>
<td>黑色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-gray</td>
<td><pre><i class="z-round z-gray"></i></pre></td>
<td><i class=" z-round z-gray"></i></td>
<td>灰色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-red</td>
<td><pre><i class="z-round z-red"></i></pre></td>
<td><i class=" z-round z-red"></i></td>
<td>红色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-orange</td>
<td><pre><i class="z-round z-orange"></i></pre></td>
<td><i class=" z-round z-orange"></i></td>
<td>橘色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-yellow</td>
<td><pre><i class="z-round z-yellow"></i></pre></td>
<td><i class=" z-round z-yellow"></i></td>
<td>黄色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-green</td>
<td><pre><i class="z-round z-green"></i></pre></td>
<td><i class=" z-round z-green"></i></td>
<td>绿色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-cyan</td>
<td><pre><i class="z-round z-cyan"></i></pre></td>
<td><i class=" z-round z-cyan"></i></td>
<td>青色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-blue</td>
<td><pre><i class="z-round z-blue"></i></pre></td>
<td><i class=" z-round z-blue"></i></td>
<td>蓝色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-purple</td>
<td><pre><i class="z-round z-purple"></i></pre></td>
<td><i class=" z-round z-purple"></i></td>
<td>紫色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd0</td>
<td><pre><i class="z-round z-black z-bd-rd0"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd0"></i></td>
<td>黑色圆角为0像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd1</td>
<td><pre><i class="z-round z-black z-bd-rd1"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd1"></i></td>
<td>黑色圆角为1个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd2</td>
<td><pre><i class="z-round z-black z-bd-rd2"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd2"></i></td>
<td>黑色圆角为2个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd3</td>
<td><pre><i class="z-round z-black z-bd-rd3"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd3"></i></td>
<td>黑色圆角为3个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd5</td>
<td><pre><i class="z-round z-black z-bd-rd5"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd5"></i></td>
<td>黑色圆角为5个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd8</td>
<td><pre><i class="z-round z-black z-bd-rd8"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd8"></i></td>
<td>黑色圆角为8个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd10</td>
<td><pre><i class="z-round z-black z-bd-rd10"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd10"></i></td>
<td>黑色圆角为10个像素</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd50p</td>
<td><pre><i class="z-round z-black z-bd-rd50p"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd50p"></i></td>
<td>黑色圆圈</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd0</td>
<td><pre><i class="z-round z-black z-bd-rd0"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd0"></i></td>
<td>黑色圆角为0像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd1</td>
<td><pre><i class="z-round z-black z-bd-rd1"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd1"></i></td>
<td>黑色圆角为1个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd2</td>
<td><pre><i class="z-round z-black z-bd-rd2"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd2"></i></td>
<td>黑色圆角为2个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd3</td>
<td><pre><i class="z-round z-black z-bd-rd3"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd3"></i></td>
<td>黑色圆角为3个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd5</td>
<td><pre><i class="z-round z-black z-bd-rd5"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd5"></i></td>
<td>黑色圆角为5个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd8</td>
<td><pre><i class="z-round z-black z-bd-rd8"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd8"></i></td>
<td>黑色圆角为8个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd10</td>
<td><pre><i class="z-round z-black z-bd-rd10"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd10"></i></td>
<td>黑色圆角为10个像素，优先定义</td>
</tr>
<tr>
<td class="z-samp">.z-round.z-black.z-bd-rd50p</td>
<td><pre><i class="z-round z-black z-bd-rd50p"></i></pre></td>
<td><i class=" z-round z-black z-bd-rd50p"></i></td>
<td>黑色圆圈，优先定义</td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}