ziqim/zhiqim_ui/document/tutorial/ui/css/ico.htm

<#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">
    &lt;i class="z-ico z-file z-word"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-image"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-pdf"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-video"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-music"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-text"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-list"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-android"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-file z-png"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-confirm"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-alert"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-loading"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-loading z-small"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-pen"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-close z-small"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-root"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-lastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-mlastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-mnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-node"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-plastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-pnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-vertline"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-blank"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-root z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-lastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-mlastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-mnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-node z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-plastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-pnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-vertline z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-root"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-lastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-mlastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-mnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-node"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-plastnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-pnode"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-vertline"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-blank"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-root z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-lastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-mlastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-mnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-node z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-plastnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-pnode z-normal"&gt;&lt;/i&gt
        </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">
    &lt;i class="z-ico z-tree z-30 z-vertline z-normal"&gt;&lt;/i&gt
        </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>&lt;i class="z-ico z-tree z-item"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-group"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-attribute"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-note"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-user"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-close"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-open"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-search"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-briefcase"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-users"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-pass"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-auth"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-address"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-exit"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-help"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-network"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-recycle"&gt;&lt;/i&gt</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>&lt;i class="z-ico z-tree z-internet"&gt;&lt;/i&gt</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">&lt;i class="z-arrow"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-px5"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up z-px5"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left z-px5"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right z-px5"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-px8"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up z-px8"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left z-px8"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right z-px8"&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-up z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-left z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-right z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-px5 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-up z-px5 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-left z-px5 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-right z-px5 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-px8 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-up z-px8 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-left z-px8 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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">&lt;i class="z-arrow z-right z-px8 z-relative-left"&gt;&lt;span&gt;&lt;/span&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-px5 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up z-px5 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left z-px5 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right z-px5 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-px8 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-up z-px8 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-left z-px8 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow z-right z-px8 z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move"&gt;&lt;/i&gt;</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>&lt;z-arrow-move z-bottom"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move z-up"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move z-down"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move z-top z-disabled"&gt;&lt;/i&gt;</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>&lt;z-arrow-move z-bottom z-disabled"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move z-up z-disabled"&gt;&lt;/i&gt;</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>&lt;i class="z-arrow-move z-down z-disabled"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-white"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-gray"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-red"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-orange"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-yellow"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-green"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-cyan"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-blue"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-purple"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd0"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd1"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd2"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd3"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd5"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd8"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd10"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd50p"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd0"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd1"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd2"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd3"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd5"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd8"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd10"&gt;&lt;/i&gt;</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>&lt;i class="z-round z-black z-bd-rd50p"&gt;&lt;/i&gt;</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()}