zyy/ziqim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
zhuyiyi
2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zhiqim_ui/document/tutorial/uim/css/block.htm
+342
View File
@@ -0,0 +1,342 @@
<#def title = "块样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/>
<#def prevUrl = "text.htm"/>
<#def nextUrl = "../js/js.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
${zhiqim_com_mobileUI_scrollJs()}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_ui("tutorial", "ui", "css", "block")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "块样式")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">块样式：</p>
<p class="z-color-333" style="text-indent:38px;">
块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。
</p>
</div>
<#-- 一、块定位 -->
<div class="tutorial title">一、块定位</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-fixed<br>
.zi-fixed
</td>
<td><pre class="z-text-preline">
.z-fixed{position:fixed;}
.zi-fixed{position:fixed !important;}
</pre></td>
<td>固定定位</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute<br>
.zi-absolute</td>
<td><pre class="z-text-preline">
.z-absolute{position:absolute;}
.zi-absolute{position:absolute !important;}
</pre></td>
<td>绝对定位</td>
</tr>
<tr>
<td class="z-samp">
.z-relative<br>
.zi-relative</td>
<td><pre class="z-text-preline">
.z-relative{position:relative;}
.zi-relative{position:relative !important;}
</pre></td>
<td>相对定位</td>
</tr>
</table>
<#-- 二、块浮动对齐 -->
<div class="tutorial title">二、块浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-float-left<br>.zi-float-left</td>
<td><pre class="z-text-preline">
.z-float-left{float:left;}
.zi-float-left{float:left !important;}
</pre></td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-center<br>.zi-float-center</td>
<td><pre class="z-text-preline">
.z-float-center{margin-left:auto;margin-right:auto;}
.zi-float-center{margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-right<br>.zi-float-right</td>
<td><pre class="z-text-preline">
.z-float-right{float:right;}
.zi-float-right{float:right !important;}
</pre></td>
<td>右对齐</td>
</tr>
</table>
<#-- 三、块定位+浮动对齐 -->
<div class="tutorial title">三、块定位+浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="23%">名称</td>
<td width="*">样式</td>
<td width="16%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-left<br>
.zi-relative-left</td>
<td><pre class="z-text-preline">
.z-relative-left{position:relative;float:left;}
.zi-relative-left{position:relative !important;float:left !important;}
</pre></td>
<td>相对左对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-center<br>
.zi-relative-center</td>
<td><pre class="z-text-preline">
.z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
.zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>相对居中</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-right<br>
.zi-relative-right</td>
<td><pre class="z-text-preline">
.z-relative-right{position:relative;float:right;}
.zi-relative-right{position:relative !important;float:right !important;}
</pre></td>
<td>相对右对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute-center-middle<br>
.zi-absolute-center-middle</td>
<td><pre class="z-text-preline">
.z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
.zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
</pre></td>
<td>绝对居中，内部块在父块的上下左右居中</td>
</tr>
</table>
<#-- 四、块溢出 -->
<div class="tutorial title">四、块溢出</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-auto</td>
<td><pre class="z-text-preline">
.z-overflow-auto{overflow:auto;}
</pre></td>
<td>块溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-hidden{overflow:hidden;}
</pre></td>
<td>块溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-scroll{overflow:scroll;}
</pre></td>
<td>块始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-auto</td>
<td><pre class="z-text-preline">
.z-overflow-x-auto{overflow-x:auto;}
</pre></td>
<td>块X轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-x-hidden{overflow-x:hidden;}
</pre></td>
<td>块X轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-x-scroll{overflow-x:scroll;}
</pre></td>
<td>块X轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-auto</td>
<td><pre class="z-text-preline">
.z-overflow-y-auto{overflow-y:auto;}
</pre></td>
<td>块Y轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-y-hidden{overflow-y:hidden;}
</pre></td>
<td>块Y轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-y-scroll{overflow-y:scroll;}
</pre></td>
<td>块Y轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
</table>
<#-- 五、块手势 -->
<div class="tutorial title">五、块鼠标标志</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-pointer</td>
<td><pre class="z-text-preline">
.z-pointer{cursor:pointer;}
</pre></td>
<td>显示手标志，即可点击状态</td>
</tr>
<tr>
<td class="z-samp">.z-forbidden</td>
<td><pre class="z-text-preline">
.z-forbidden{cursor:not-allowed;}
</pre></td>
<td>禁止使用，显示禁止标志</td>
</tr>
</table>
<#-- 六、块隐藏和显示 -->
<div class="tutorial title">六、块隐藏和显示</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">举例</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-hide<br>.zi-hide</td>
<td><pre class="z-text-preline">
.z-hide{display:none;}
.zi-hide{display:none !important;}
</pre>
</td>
<td>隐藏，不占位</td>
</tr>
<tr>
<td class="z-samp">
.z-show<br>.z-show-b<br>.z-show-ib<br>
.zi-show<br>.zi-show-b<br>.zi-show-ib
</td>
<td><pre class="z-text-preline">
.z-show{display:inline;}
.z-show-b{display:block;}
.z-show-ib{display:inline-block;}
.zi-show{display:inline !important;}
.zi-show-b{display:block !important;}
.zi-show-ib{display:inline-block !important;}
</pre></td>
<td class="z-samp">
显示的三种状态<br>
1、z-show适用于&lt;span&gt;,&lt;a&gt;,&lt;label&gt;,&lt;input&gt;,&lt;img&gt;<br>
2、z-show-b适用&lt;div&gt;,&lt;p&gt;,&lt;h1&gt;,&lt;form&gt;,&lt;ul&gt;&lt;li&gt;<br>
3、z-show-ib适用于把块作为内联方式。
</td>
</tr>
<tr>
<td class="z-samp">.z-visible<br>.zi-visible</td>
<td><pre class="z-text-preline">
.z-visible{visibility:visible !important;}
.zi-visible{visibility:visible !important;}
</pre></td>
<td>用于保留占位的显示</td>
</tr>
<tr>
<td class="z-samp">.z-hidden<br>.zi-hidden<br></td>
<td><pre class="z-text-preline">
.z-hidden{visibility:hidden !important;}
.zi-hidden{visibility:hidden !important;}
</pre></td>
<td>用于保留占位的隐藏</td>
</tr>
</table>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_com_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_com_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/css/color.htm
+645
View File
@@ -0,0 +1,645 @@
<#def title = "颜色定义"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "颜色定义基本保持ZhiqimUI的风格不变，仍然使用z-前缀；默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。"/>
<#def prevUrl = "rem.htm"/>
<#def nextUrl = "font.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "css", "color")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "颜色定义")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">颜色定义：</p>
<p class="z-color-333" style="text-indent:38px;">
颜色定义基本保持ZhiqimUI的风格不变，仍然使用z-前缀；默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
</p>
</div>
<#var colorMap = Jsons.toMap(context.getResourceString("/zhiqimUI/css/zhiqim.pre.json", "UTF-8"))/>
<#-- 全局颜色 -->
<div class="tutorial title">全局颜色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>全局文本颜色</td>
<td class="z-samp">&#x24;{textColor}</td>
<td class="z-samp">${colorMap.get("textColor")}</td>
<td>全局颜色</td>
<td>全局颜色定义，定义在body中</td>
</tr>
<tr>
<td>全局背景颜色</td>
<td class="z-samp">&#x24;{bgColor}</td>
<td class="z-samp">${colorMap.get("bgColor")}</td>
<td>全局背景</td>
<td>全局背景颜色，定义在body中</td>
</tr>
<tr>
<td>全局链接颜色</td>
<td class="z-samp">&#x24;{linkColor}</td>
<td class="z-samp">${colorMap.get("linkColor")}</td>
<td rowspan="2"><a href="javascript:void(0);">链接效果</a></td>
<td>全局链接颜色，定义在a,a:visited中</td>
</tr>
<tr>
<td>全局链接Hover颜色</td>
<td class="z-samp">&#x24;{linkHoverColor}</td>
<td class="z-samp">${colorMap.get("linkHoverColor")}</td>
<td>全局链接颜色，定义在a:hover,a:focus,a:active中</td>
</tr>
</table>
<#-- 白色 -->
<div class="tutorial title">白色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>白色文本</td>
<td class="z-samp">&#x24;{whiteTextColor}</td>
<td class="z-samp">${colorMap.get("whiteTextColor")}</td>
<td class="z-bg-black"><span class="z-text-white">白色文本</span></td>
<td>.z-text-white</td>
</tr>
<tr>
<td>白色背景</td>
<td class="z-samp">&#x24;{whiteBgColor}</td>
<td class="z-samp">${colorMap.get("whiteBgColor")}</td>
<td class="z-bg-white"><span class="z-text-black">白色背景</span></td>
<td>.z-bg-white</td>
</tr>
</table>
<#-- 黑色 -->
<div class="tutorial title">黑色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>黑色文本</td>
<td class="z-samp">&#x24;{blackTextColor}</td>
<td class="z-samp">${colorMap.get("blackTextColor")}</td>
<td><span class="z-text-black">黑色文本</span></td>
<td class="z-samp">.z-text-black</td>
</tr>
<tr>
<td>黑色背景</td>
<td class="z-samp">&#x24;{blackBgColor}</td>
<td class="z-samp">${colorMap.get("blackBgColor")}</td>
<td class="z-bg-black"><span class="z-text-white">黑色背景</span></td>
<td class="z-samp">.z-bg-black</td>
</tr>
</table>
<#-- 灰色 -->
<div class="tutorial title">灰色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>灰色文本</td>
<td class="z-samp">&#x24;{grayTextColor}</td>
<td class="z-samp">${colorMap.get("grayTextColor")}</td>
<td><span class="z-text-gray">灰色文本</span></td>
<td class="z-samp">.z-text-gray</td>
</tr>
<tr>
<td>灰色背景</td>
<td class="z-samp">&#x24;{grayBgColor}</td>
<td class="z-samp">${colorMap.get("grayBgColor")}</td>
<td class="z-bg-gray"><span class="z-text-gray">灰色背景</span></td>
<td class="z-samp">.z-bg-gray</td>
</tr>
<tr>
<td>灰色边框</td>
<td class="z-samp">&#x24;{grayBdColor}</td>
<td class="z-samp">${colorMap.get("grayBdColor")}</td>
<td><span class="z-bd z-text-gray z-pd3">灰色边框</span></td>
<td class="z-samp">.z-bd</td>
</tr>
<tr>
<td>灰色按钮文本</td>
<td class="z-samp">&#x24;{btnTextColor}</td>
<td class="z-samp">${colorMap.get("btnTextColor")}</td>
<td><span class="z-bd z-pd3" style="color:${colorMap.get("btnTextColor")};">灰色按钮</span></td>
<td rowspan="4" class="z-bd-l">
<div>
<div class="z-button">灰色按钮</div>
<div class="z-button z-bordered-bg">灰色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered">橙色按钮</div>
<div class="z-button z-bordered z-hover">橙色按钮</div>
<div class="z-button z-bordered z-active">橙色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>灰色按钮边框和背景</td>
<td class="z-samp">&#x24;{btnBdColor}<br>&#x24;{btnBgColor}</td>
<td class="z-samp">${colorMap.get("btnBdColor")}<br>${colorMap.get("btnBgColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgColor")};">灰色按钮</div></td>
</tr>
<tr>
<td>灰色hover背景</td>
<td class="z-samp">&#x24;{btnBgHoverColor}</td>
<td class="z-samp">${colorMap.get("btnBgHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgHoverColor")};">灰色按钮</div></td>
</tr>
<tr>
<td>灰色按钮active背景</td>
<td class="z-samp">&#x24;{btnBgActiveColor}</td>
<td class="z-samp">${colorMap.get("btnBgActiveColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgActiveColor")};">灰色按钮</div></td>
</tr>
</table>
<#-- 红色 -->
<div class="tutorial title">红色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>红色文本</td>
<td class="z-samp">&#x24;{redTextColor}</td>
<td class="z-samp">${colorMap.get("redTextColor")}</td>
<td><span class="z-text-red">红色文本</span></td>
<td class="z-samp">.z-text-red</td>
</tr>
<tr>
<td>红色背景</td>
<td class="z-samp">&#x24;{redBgColor}</td>
<td class="z-samp">${colorMap.get("redBgColor")}</td>
<td class="z-bg-red"><span class="z-text-red">红色背景</span></td>
<td class="z-samp">.z-bg-red</td>
</tr>
<tr>
<td>红色边框</td>
<td class="z-samp">&#x24;{redBdColor}</td>
<td class="z-samp">${colorMap.get("redBdColor")}</td>
<td><span class="z-bd z-red z-text-red z-pd3">红色边框</span></td>
<td>.z-bd.z-red</td>
</tr>
<tr>
<td>红色按钮边框</td>
<td class="z-samp">&#x24;{redBtnBdColor}</td>
<td class="z-samp">${colorMap.get("redBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redBdColor")};">红色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-red">红色按钮</div>
<div class="z-button z-bordered-bg z-red-bg">红色按钮</div>
<div class="z-button z-bordered-bg z-red-bd z-red-bg">红色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-red-bd">红色按钮</div>
<div class="z-button z-bordered z-red-bd z-hover">红色按钮</div>
<div class="z-button z-bordered z-red-bd z-active">红色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>红色hover背景</td>
<td class="z-samp">&#x24;{redHoverColor}</td>
<td class="z-samp">${colorMap.get("redHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redHoverColor")};">红色按钮</div></td>
</tr>
</table>
<#-- 橙色 -->
<div class="tutorial title">橙色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>橙色文本</td>
<td class="z-samp">&#x24;{orangeTextColor}</td>
<td class="z-samp">${colorMap.get("orangeTextColor")}</td>
<td><span class="z-text-orange">橙色文本</span></td>
<td class="z-samp">.z-text-orange</td>
</tr>
<tr>
<td>橙色背景</td>
<td class="z-samp">&#x24;{orangeBgColor}</td>
<td class="z-samp">${colorMap.get("orangeBgColor")}</td>
<td class="z-bg-orange"><span class="z-text-orange">橙色背景</span></td>
<td class="z-samp">.z-bg-orange</td>
</tr>
<tr>
<td>橙色边框</td>
<td class="z-samp">&#x24;{orangeBdColor}</td>
<td class="z-samp">${colorMap.get("orangeBdColor")}</td>
<td><span class="z-bd z-orange z-text-orange z-pd3">橙色边框</span></td>
<td class="z-samp">.z-bd.z-orange</td>
</tr>
<tr>
<td>橙色按钮边框</td>
<td class="z-samp">&#x24;{orangeBtnBdColor}</td>
<td class="z-samp">${colorMap.get("orangeBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeBdColor")};">橙色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-orange">橙色按钮</div>
<div class="z-button z-bordered-bg z-orange-bg">橙色按钮</div>
<div class="z-button z-bordered-bg z-orange-bd z-orange-bg">橙色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-orange-bd">橙色按钮</div>
<div class="z-button z-bordered z-orange-bd z-hover">橙色按钮</div>
<div class="z-button z-bordered z-orange-bd z-active">橙色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>橙色hover背景</td>
<td class="z-samp">&#x24;{orangeHoverColor}</td>
<td class="z-samp">${colorMap.get("orangeHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeHoverColor")};">橙色按钮</div></td>
</tr>
</table>
<#-- 黄色 -->
<div class="tutorial title">黄色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>黄色文本</td>
<td class="z-samp">&#x24;{yellowTextColor}</td>
<td class="z-samp">${colorMap.get("yellowTextColor")}</td>
<td><span class="z-text-yellow">黄色文本</span></td>
<td class="z-samp">.z-text-yellow</td>
</tr>
<tr>
<td>黄色背景</td>
<td class="z-samp">&#x24;{yellowBgColor}</td>
<td class="z-samp">${colorMap.get("yellowBgColor")}</td>
<td class="z-bg-yellow"><span class="z-text-yellow">黄色背景</span></td>
<td class="z-samp">.z-bg-yellow</td>
</tr>
<tr>
<td>黄色边框</td>
<td class="z-samp">&#x24;{yellowBdColor}</td>
<td class="z-samp">${colorMap.get("yellowBdColor")}</td>
<td><span class="z-bd z-yellow z-text-yellow z-pd3">黄色边框</span></td>
<td class="z-samp">.z-bd.z-yellow</td>
</tr>
<tr>
<td>黄色按钮边框</td>
<td class="z-samp">&#x24;{yellowBtnBdColor}</td>
<td class="z-samp">${colorMap.get("yellowBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowBdColor")};">黄色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-yellow">黄色按钮</div>
<div class="z-button z-bordered-bg z-yellow-bg">黄色按钮</div>
<div class="z-button z-bordered-bg z-yellow-bd z-yellow-bg">黄色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-yellow-bd">黄色按钮</div>
<div class="z-button z-bordered z-yellow-bd z-hover">黄色按钮</div>
<div class="z-button z-bordered z-yellow-bd z-active">黄色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>黄色hover背景</td>
<td class="z-samp">&#x24;{yellowHoverColor}</td>
<td class="z-samp">${colorMap.get("yellowHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowHoverColor")};">黄色按钮</div></td>
</tr>
</table>
<#-- 绿色 -->
<div class="tutorial title">绿色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>绿色文本</td>
<td class="z-samp">&#x24;{greenTextColor}</td>
<td class="z-samp">${colorMap.get("greenTextColor")}</td>
<td><span class="z-text-green">绿色文本</span></td>
<td class="z-samp">.z-text-green</td>
</tr>
<tr>
<td>绿色背景</td>
<td class="z-samp">&#x24;{greenBgColor}</td>
<td class="z-samp">${colorMap.get("greenBgColor")}</td>
<td class="z-bg-green"><span class="z-text-green">绿色背景</span></td>
<td class="z-samp">.z-bg-green</td>
</tr>
<tr>
<td>绿色边框</td>
<td class="z-samp">&#x24;{greenBdColor}</td>
<td class="z-samp">${colorMap.get("greenBdColor")}</td>
<td><span class="z-bd z-green z-text-green z-pd3">绿色边框</span></td>
<td class="z-samp">.z-bd.z-green</td>
</tr>
<tr>
<td>绿色按钮边框</td>
<td class="z-samp">&#x24;{greenBtnBdColor}</td>
<td class="z-samp">${colorMap.get("greenBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenBdColor")};">绿色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-green">绿色按钮</div>
<div class="z-button z-bordered-bg z-green-bg">绿色按钮</div>
<div class="z-button z-bordered-bg z-green-bd z-green-bg">绿色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-green-bd">绿色按钮</div>
<div class="z-button z-bordered z-green-bd z-hover">绿色按钮</div>
<div class="z-button z-bordered z-green-bd z-active">绿色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>绿色hover背景</td>
<td class="z-samp">&#x24;{greenHoverColor}</td>
<td class="z-samp">${colorMap.get("greenHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenHoverColor")};">绿色按钮</div></td>
</tr>
</table>
<#--青色 -->
<div class="tutorial title">青色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr>
<td colspan="5" class="zi-text-cyan">青色</td>
</tr>
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>青色文本</td>
<td class="z-samp">&#x24;{cyanTextColor}</td>
<td class="z-samp">${colorMap.get("cyanTextColor")}</td>
<td><span class="z-text-cyan">青色文本</span></td>
<td class="z-samp">.z-text-cyan</td>
</tr>
<tr>
<td>青色背景</td>
<td class="z-samp">&#x24;{cyanBgColor}</td>
<td class="z-samp">${colorMap.get("cyanBgColor")}</td>
<td class="z-bg-cyan"><span class="z-text-cyan">青色背景</span></td>
<td class="z-samp">.z-bg-cyan</td>
</tr>
<tr>
<td>青色边框</td>
<td class="z-samp">&#x24;{cyanBdColor}</td>
<td class="z-samp">${colorMap.get("cyanBdColor")}</td>
<td><span class="z-bd z-cyan z-text-cyan z-pd3">青色边框</span></td>
<td class="z-samp">.z-bd.z-cyan</td>
</tr>
<tr>
<td>青色按钮边框</td>
<td class="z-samp">&#x24;{cyanBtnBdColor}</td>
<td class="z-samp">${colorMap.get("cyanBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanBdColor")};">青色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-cyan">青色按钮</div>
<div class="z-button z-bordered-bg z-cyan-bg">青色按钮</div>
<div class="z-button z-bordered-bg z-cyan-bd z-cyan-bg">青色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-cyan-bd">青色按钮</div>
<div class="z-button z-bordered z-cyan-bd z-hover">青色按钮</div>
<div class="z-button z-bordered z-cyan-bd z-active">青色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>青色hover背景</td>
<td class="z-samp">&#x24;{cyanHoverColor}</td>
<td class="z-samp">${colorMap.get("cyanHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanHoverColor")};">青色按钮</div></td>
</tr>
</table>
<#--蓝色 -->
<div class="tutorial title">蓝色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>蓝色文本</td>
<td class="z-samp">&#x24;{blueTextColor}</td>
<td class="z-samp">${colorMap.get("blueTextColor")}</td>
<td><span class="z-text-blue">蓝色文本</span></td>
<td class="z-samp">.z-text-blue</td>
</tr>
<tr>
<td>蓝色背景</td>
<td class="z-samp">&#x24;{blueBgColor}</td>
<td class="z-samp">${colorMap.get("blueBgColor")}</td>
<td class="z-bg-blue"><span class="z-text-blue">蓝色背景</span></td>
<td class="z-samp">.z-bg-blue</td>
</tr>
<tr>
<td>蓝色边框</td>
<td class="z-samp">&#x24;{blueBdColor}</td>
<td class="z-samp">${colorMap.get("blueBdColor")}</td>
<td><span class="z-bd z-blue z-text-blue z-pd3">蓝色边框</span></td>
<td class="z-samp">.z-bd.z-blue</td>
</tr>
<tr>
<td>蓝色按钮边框</td>
<td class="z-samp">&#x24;{blueBtnBdColor}</td>
<td class="z-samp">${colorMap.get("blueBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueBdColor")};">蓝色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-blue">蓝色按钮</div>
<div class="z-button z-bordered-bg z-blue-bg">蓝色按钮</div>
<div class="z-button z-bordered-bg z-blue-bd z-blue-bg">蓝色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-blue-bd">蓝色按钮</div>
<div class="z-button z-bordered z-blue-bd z-hover">蓝色按钮</div>
<div class="z-button z-bordered z-blue-bd z-active">蓝色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>蓝色hover背景</td>
<td class="z-samp">&#x24;{blueHoverColor}</td>
<td class="z-samp">${colorMap.get("blueHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueHoverColor")};">蓝色按钮</div></td>
</tr>
</table>
<#--紫色 -->
<div class="tutorial title">紫色</div>
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="22%">通配符</td>
<td width="14%">缺省值</td>
<td width="10%">举例</td>
<td width="*">说明</td>
</tr>
<tr>
<td>紫色文本</td>
<td class="z-samp">&#x24;{purpleTextColor}</td>
<td class="z-samp">${colorMap.get("purpleTextColor")}</td>
<td><span class="z-text-purple">紫色文本</span></td>
<td class="z-samp">.z-text-purple</td>
</tr>
<tr>
<td>紫色背景</td>
<td class="z-samp">&#x24;{purpleBgColor}</td>
<td class="z-samp">${colorMap.get("purpleBgColor")}</td>
<td class="z-bg-purple"><span class="z-text-purple">紫色背景</span></td>
<td class="z-samp">.z-bg-purple</td>
</tr>
<tr>
<td>紫色边框</td>
<td class="z-samp">&#x24;{purpleBdColor}</td>
<td class="z-samp">${colorMap.get("purpleBdColor")}</td>
<td><span class="z-bd z-purple z-text-purple z-pd3">紫色边框</span></td>
<td class="z-samp">.z-bd.z-purple</td>
</tr>
<tr>
<td>紫色按钮边框</td>
<td class="z-samp">&#x24;{purpleBtnBdColor}</td>
<td class="z-samp">${colorMap.get("purpleBtnBdColor")}</td>
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleBdColor")};">紫色按钮</div></td>
<td rowspan="2" class="z-bd-l">
<div>
<div class="z-button z-purple">紫色按钮</div>
<div class="z-button z-bordered-bg z-purple-bg">紫色按钮</div>
<div class="z-button z-bordered-bg z-purple-bd z-purple-bg">紫色按钮</div>
（按钮、筛选按钮）
</div>
<div class="z-mg-t10">
<div class="z-button z-bordered z-purple-bd">紫色按钮</div>
<div class="z-button z-bordered z-purple-bd z-hover">紫色按钮</div>
<div class="z-button z-bordered z-purple-bd z-active">紫色按钮</div>
（多选按钮三种状态）
</div>
</td>
</tr>
<tr>
<td>紫色hover背景</td>
<td class="z-samp">&#x24;{purpleHoverColor}</td>
<td class="z-samp">${colorMap.get("purpleHoverColor")}</td>
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleHoverColor")};">紫色按钮</div></td>
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/css/css.htm
+294
View File
@@ -0,0 +1,294 @@
<#def title = "全局定义"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
<#def prevUrl = "../index.htm"/>
<#def nextUrl = "rem.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "css", "global")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "全局定义")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">全局定义：</p>
<p class="z-color-333" style="text-indent:38px;">
全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<br>
1、HTML5新模板和兼容：包括十二个block新标签、三个inline-block新标签，以及隐藏等其他属性；<br>
2、全局标记一致性定义：约定html、body、img、p等标签在所有浏览器中一致性定义；<br>
3、表单一致性定义：约定button、input、checkbox、radio等表单属性在所有浏览器中一致性定义。<br>
</p>
</div>
<#-- 全局HTML5新模板和兼容问题 -->
<div class="tutorial title">全局HTML5新模板和兼容问题</div>
<table class="z-table z-pd10 z-lh200p">
<tr>
<td class="zi-px18">一、十二个新标签（block）：</td>
</tr>
<tr>
<td>
<span class="z-text-prewrap z-pre">
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
</span>
</td>
</tr>
<tr>
<td class="zi-px18">二、三个新标签（inline-block）：</td>
</tr>
<tr>
<td>
<span class="z-text-prewrap z-pre">
audio,canvas,video{display:inline-block;vertical-align:baseline;}
</span>
</td>
</tr>
<tr>
<td class="zi-px18">三、音频模块兼容性问题</td>
</tr>
<tr>
<td>
<span class="z-text-prewrap z-pre">
audio:not([controls]){display:none;height:0;}
为防止主流浏览器中，显示"不带控制按钮的音频模块"这一问题。以及解决iOS5移动端显示多余高度的兼容性问题。
</span>
</td>
</tr>
<tr>
<td class="zi-px18">四、有隐藏属性或标记为模板的的设置为隐藏</td>
</tr>
<tr>
<td>
<span class="z-text-prewrap z-pre">
[hidden],template{display:none;}
</span>
</td>
</tr>
<tr>
<td class="zi-px18">五、设置svg非根元素的元素不显示仅占位</td>
</tr>
<tr>
<td>
<span class="z-text-prewrap z-pre">
svg:not(:root){overflow:hidden;}
只支持一个根元素如(&lt;svg&gt;&lt;/svg&gt;)，除了&lt;svg&gt;内部的，其他的都不显示
</span>
</td>
</tr>
</table>
<#-- 全局标记一致性定义 -->
<div class="tutorial title">全局标记一致性定义</div>
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
<tr><td class="zi-px18">一、所有标签（*,*:before,*:after）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
*{border-box;box-sizing:border-box;}
*:before,*:after{box-sizing:border-box;}
默认所有元素含插入内容前后宽高设置采用border-box方式，即宽高包括border和padding，向内扩充
</span>
</td></tr>
<tr><td class="zi-px18">二、HTML标签</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
html{
font-family:"微软雅黑","宋体",Arial,sans-serif;
overflow-x:hidden;overflow-y:auto;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
@media screen and (max-width: 320px) {
html {
font-size:83.33px;
font-size:26.66667vw
}
}
... ...
@media screen and (min-width: 769px) {
html {
font-size:204.8px
}
}
html,body{width:100%;height:100%;position:relative;overflow:hidden;}
1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
2、指定文档宽高并隐藏超出
3、当屏幕横坚切换时字体大小调整和以前一样
4、文档字体大小以rem为主，所以用@media screen自定义不同的html字体大小
</span>
</td></tr>
<tr><td class="zi-px18">二、默认字体大小行高颜色、背景颜色，无外边框</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
body{color:#333;background-color:#fff;}
body,table,td,div{font-size:12px;line-height:120%;}
body,form,figure{margin:0;}
</span>
</td></tr>
<tr><td class="zi-px18">三、图片无边框、居中、不超时父边框宽高，IE7以上支持缩放不失真（bicubic）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
img{border:0;vertical-align:middle;max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic;}
</span>
</td></tr>
<tr><td class="zi-px18">四、段落无内外边距，这样p和br功能相同</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
p{margin:0px;padding:0px;}
</span>
</td></tr>
<tr><td class="zi-px18">五、字段集合默认边框、左右两像素外边距，和内边距设置，名称无边框和内边距</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
p{margin:0px;padding:0px;}
</span>
</td></tr>
<tr><td class="zi-px18">六、分隔线修改为上边框一条1像素的线，上下1em高度</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
hr{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
height:0;border:0;border-top:1px solid #eee;margin:1em 0;
}
</span>
</td></tr>
<tr><td class="zi-px18">七、列表无前序号，无内外边距，行高1.25em</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
ul,dl,ol,li{list-style:none;padding:0;margin:0;}
li{line-height:1.25em;}
</span>
</td></tr>
<tr><td class="zi-px18">八、链接，初始和访问后相同，淡黑色背景透明，移入无下标线、默认淡青色</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
a,a:visited{color:#333;text-decoration:none;background-color:transparent;}
a:focus{color:#43cd6e;outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
a:active,a:hover{color:#43cd6e;outline:0;text-decoration:underline;}
<a href="javascript:void(0);">这里是文本连接效果</a>
</span>
</td></tr>
</table>
<#-- 表单一致性定义 -->
<div class="tutorial title">表单一致性定义</div>
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
<tr><td class="zi-px18">一、统一按钮和输入框无内外边距（Firefox默认按扭和输入框padding 0 2px）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
</span>
</td></tr>
<tr><td class="zi-px18">二、输入框行高强制成正常（各个浏览器默认值不一样）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input{line-height:normal;}
</span>
</td></tr>
<tr><td class="zi-px18">三、表单控件不显示选中边框（webkit默认有边框）</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button,input,select,optgroup,textarea{color:inherit;font:inherit;margin:0;outline:none;}
</span>
</td></tr>
<tr><td class="zi-px18">四、按钮可见，webkit渲染，不可用时手势为禁止，取消可能的大小写文本转换</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
button{overflow:visible;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:not-allowed;}
button,select{text-transform:none;}
</span>
</td></tr>
<tr><td class="zi-px18">五、单多选按钮有2像素偏下,IE高度和背景白色问题，修改成高度为13px，背景透明</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="checkbox"],input[type="radio"]{margin-top:-2px;border:0;padding:0;vertical-align:middle;height:13px;background-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
</span>
</td></tr>
<tr><td class="zi-px18">六、选项框（select）中的分组默认加粗</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
optgroup{font-weight:bold;}
</span>
</td></tr>
<tr><td class="zi-px18">七、移动设备上webkit自定义数字框高度自动</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
</span>
</td></tr>
<tr><td class="zi-px18">八、移动设备上webkit自定义搜索框为文本字段，宽高设置采用content-box，按钮取消原生样式</td></tr>
<tr><td>
<span class="z-text-prewrap z-pre">
input[type="search"]{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
}
</span>
</td></tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/css/fadfox.pre.json
+70
View File
@@ -0,0 +1,70 @@
{
textColor:"#333",
bgColor:"#fff",
linkColor:"#333",
linkHoverColor:"#06c",
whiteTextColor:"#fffff0",
whiteBgColor:"#fff",
blackTextColor:"#333",
blackBgColor:"#000",
grayTextColor:"#ccc",
grayBgColor:"#f5f5f5",
grayBdColor:"#d3d3d3",
btnTextColor:"#333",
btnBdColor:"#c3c3c3",
btnBgColor:"#f2f2f2",
btnBgHoverColor:"#f5f5f5",
btnBgActiveColor:"#dfdfdf",
redTextColor:"#8b0000",
redBgColor:"#ffe4e1",
redBdColor:"#ea4a36",
redBtnBdColor:"#e8351f",
redBtnBgColor:"#ea4a36",
redHoverColor:"#ed6a5a",
orangeTextColor:"#fe4615",
orangeBgColor:"#f5deb3",
orangeBdColor:"#ff6600",
orangeBtnBdColor:"#ff4e00",
orangeBtnBgColor:"#ff6600",
orangeHoverColor:"#ff8533",
yellowTextColor:"#ffd700",
yellowBgColor:"#ffe",
yellowBdColor:"#fac603",
yellowBtnBdColor:"#e1b203",
yellowBtnBgColor:"#fac603",
yellowHoverColor:"#fbd238",
greenTextColor:"#006400",
greenBgColor:"#f0fff0",
greenBdColor:"#43cd6e",
greenBtnBdColor:"#34c360",
greenBtnBgColor:"#43cd6e",
greenHoverColor:"#49de79",
cyanTextColor:"#008b8b",
cyanBgColor:"#e1ffff",
cyanBdColor:"#009899",
cyanBtnBdColor:"#029394",
cyanBtnBgColor:"#009899",
cyanHoverColor:"#4bb0af",
blueTextColor:"#0066cc",
blueBgColor:"#f0f8ff",
blueBdColor:"#2a689d",
blueBtnBdColor:"#1299ec",
blueBtnBgColor:"#28a3ef",
blueHoverColor:"#4cb9fc",
purpleTextColor:"#ba55d3",
purpleBgColor:"#e6e6fa",
purpleBdColor:"#9e70ca",
purpleBtnBdColor:"#9469bd",
purpleBtnBgColor:"#9e70ca",
purpleHoverColor:"#ac7ed7"
}
zhiqim_ui/document/tutorial/uim/css/font.htm
+949
View File
@@ -0,0 +1,949 @@
<#def title = "字体图标"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分"/>
<#def prevUrl = "color.htm"/>
<#def nextUrl = "ico.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "css", "font")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "字体图标")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">什么是“字体图标”？</p>
<p class="z-color-333" style="text-indent:38px;">
“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分
操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
字体图标不支持斜体，以便使用&lt;i&gt;标签来定义，如&lt;i class="z-font z-config"&gt;&lt;/i&gt;
</p>
</div>
<#-- 操作类 -->
<div class="tutorial title">一、操作类图标，编码范围（f000-f03f），共18个</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="10%">编码</td>
<td width="*" colspan="10">图标</td>
</tr>
<tr>
<td class="z-samp">.z-font.z-config</td>
<td class="z-samp">&amp;#xf000;</td>
<td width="7%"><i class="z-font z-config"></i>&nbsp;字体</td>
<td width="6%" class="z-bg-black"><i class="z-font z-config z-text-white"></i></td>
<td width="6%"><i class="z-font z-config z-text-gray"></i></td>
<td width="9%"><i class="z-font z-config z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td width="8%"><i class="z-font z-config z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td width="6%"><i class="z-font z-config z-text-yellow"></i></td>
<td width="6%"><i class="z-font z-config z-text-green"></i></td>
<td width="6%"><i class="z-font z-config z-text-cyan"></i></td>
<td width="6%"><i class="z-font z-config z-text-blue"></i></td>
<td width="6%"><i class="z-font z-config z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-add</td>
<td class="z-samp">&amp;#xf001;</td>
<td><i class="z-font z-add"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-add z-text-white"></i></td>
<td><i class="z-font z-add z-text-gray"></i></td>
<td><i class="z-font z-add z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-add z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-add z-text-yellow"></i></td>
<td><i class="z-font z-add z-text-green"></i></td>
<td><i class="z-font z-add z-text-cyan"></i></td>
<td><i class="z-font z-add z-text-blue"></i></td>
<td><i class="z-font z-add z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-modify</td>
<td class="z-samp">&amp;#xf002;</td>
<td><i class="z-font z-modify"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-modify z-text-white"></i></td>
<td><i class="z-font z-modify z-text-gray"></i></td>
<td><i class="z-font z-modify z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-modify z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-modify z-text-yellow"></i></td>
<td><i class="z-font z-modify z-text-green"></i></td>
<td><i class="z-font z-modify z-text-cyan"></i></td>
<td><i class="z-font z-modify z-text-blue"></i></td>
<td><i class="z-font z-modify z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-delete</td>
<td class="z-samp">&amp;#xf003;</td>
<td><i class="z-font z-delete"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-delete z-text-white"></i></td>
<td><i class="z-font z-delete z-text-gray"></i></td>
<td><i class="z-font z-delete z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-delete z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-delete z-text-yellow"></i></td>
<td><i class="z-font z-delete z-text-green"></i></td>
<td><i class="z-font z-delete z-text-cyan"></i></td>
<td><i class="z-font z-delete z-text-blue"></i></td>
<td><i class="z-font z-delete z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-query</td>
<td class="z-samp">&amp;#xf004;</td>
<td><i class="z-font z-query"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-query z-text-white"></i></td>
<td><i class="z-font z-query z-text-gray"></i></td>
<td><i class="z-font z-query z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-query z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-query z-text-yellow"></i></td>
<td><i class="z-font z-query z-text-green"></i></td>
<td><i class="z-font z-query z-text-cyan"></i></td>
<td><i class="z-font z-query z-text-blue"></i></td>
<td><i class="z-font z-query z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-previous</td>
<td class="z-samp">&amp;#xf005;</td>
<td><i class="z-font z-previous"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-previous z-text-white"></i></td>
<td><i class="z-font z-previous z-text-gray"></i></td>
<td><i class="z-font z-previous z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-previous z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-previous z-text-yellow"></i></td>
<td><i class="z-font z-previous z-text-green"></i></td>
<td><i class="z-font z-previous z-text-cyan"></i></td>
<td><i class="z-font z-previous z-text-blue"></i></td>
<td><i class="z-font z-previous z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-next</td>
<td class="z-samp">&amp;#xf006;</td>
<td><i class="z-font z-next"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-next z-text-white"></i></td>
<td><i class="z-font z-next z-text-gray"></i></td>
<td><i class="z-font z-next z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-next z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-next z-text-yellow"></i></td>
<td><i class="z-font z-next z-text-green"></i></td>
<td><i class="z-font z-next z-text-cyan"></i></td>
<td><i class="z-font z-next z-text-blue"></i></td>
<td><i class="z-font z-next z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-open</td>
<td class="z-samp">&amp;#xf007;</td>
<td><i class="z-font z-open"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-open z-text-white"></i></td>
<td><i class="z-font z-open z-text-gray"></i></td>
<td><i class="z-font z-open z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-open z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-open z-text-yellow"></i></td>
<td><i class="z-font z-open z-text-green"></i></td>
<td><i class="z-font z-open z-text-cyan"></i></td>
<td><i class="z-font z-open z-text-blue"></i></td>
<td><i class="z-font z-open z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-close</td>
<td class="z-samp">&amp;#xf008;</td>
<td><i class="z-font z-close"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-close z-text-white"></i></td>
<td><i class="z-font z-close z-text-gray"></i></td>
<td><i class="z-font z-close z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-close z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-close z-text-yellow"></i></td>
<td><i class="z-font z-close z-text-green"></i></td>
<td><i class="z-font z-close z-text-cyan"></i></td>
<td><i class="z-font z-close z-text-blue"></i></td>
<td><i class="z-font z-close z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-upload</td>
<td class="z-samp">&amp;#xf009;</td>
<td><i class="z-font z-upload"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-upload z-text-white"></i></td>
<td><i class="z-font z-upload z-text-gray"></i></td>
<td><i class="z-font z-upload z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-upload z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-upload z-text-yellow"></i></td>
<td><i class="z-font z-upload z-text-green"></i></td>
<td><i class="z-font z-upload z-text-cyan"></i></td>
<td><i class="z-font z-upload z-text-blue"></i></td>
<td><i class="z-font z-upload z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-save或.z-font.z-finish</td>
<td class="z-samp">&amp;#xf00a;</td>
<td><i class="z-font z-save"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-save z-text-white"></i></td>
<td><i class="z-font z-save z-text-gray"></i></td>
<td><i class="z-font z-save z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-save z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-save z-text-yellow"></i></td>
<td><i class="z-font z-save z-text-green"></i></td>
<td><i class="z-font z-save z-text-cyan"></i></td>
<td><i class="z-font z-save z-text-blue"></i></td>
<td><i class="z-font z-save z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-return</td>
<td class="z-samp">&amp;#xf00b;</td>
<td><i class="z-font z-return"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-return z-text-white"></i></td>
<td><i class="z-font z-return z-text-gray"></i></td>
<td><i class="z-font z-return z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-return z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-return z-text-yellow"></i></td>
<td><i class="z-font z-return z-text-green"></i></td>
<td><i class="z-font z-return z-text-cyan"></i></td>
<td><i class="z-font z-return z-text-blue"></i></td>
<td><i class="z-font z-return z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-refresh</td>
<td class="z-samp">&amp;#xf00c;</td>
<td><i class="z-font z-refresh"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-refresh z-text-white"></i></td>
<td><i class="z-font z-refresh z-text-gray"></i></td>
<td><i class="z-font z-refresh z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-refresh z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-refresh z-text-yellow"></i></td>
<td><i class="z-font z-refresh z-text-green"></i></td>
<td><i class="z-font z-refresh z-text-cyan"></i></td>
<td><i class="z-font z-refresh z-text-blue"></i></td>
<td><i class="z-font z-refresh z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-success</td>
<td class="z-samp">&amp;#xf00d;</td>
<td><i class="z-font z-success"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-success z-text-white"></i></td>
<td><i class="z-font z-success z-text-gray"></i></td>
<td><i class="z-font z-success z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-success z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-success z-text-yellow"></i></td>
<td><i class="z-font z-success z-text-green"></i></td>
<td><i class="z-font z-success z-text-cyan"></i></td>
<td><i class="z-font z-success z-text-blue"></i></td>
<td><i class="z-font z-success z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-error</td>
<td class="z-samp">&amp;#xf00e;</td>
<td><i class="z-font z-error"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-error z-text-white"></i></td>
<td><i class="z-font z-error z-text-gray"></i></td>
<td><i class="z-font z-error z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-error z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-error z-text-yellow"></i></td>
<td><i class="z-font z-error z-text-green"></i></td>
<td><i class="z-font z-error z-text-cyan"></i></td>
<td><i class="z-font z-error z-text-blue"></i></td>
<td><i class="z-font z-error z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-setting</td>
<td class="z-samp">&amp;#xf00f;</td>
<td><i class="z-font z-setting"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-setting z-text-white"></i></td>
<td><i class="z-font z-setting z-text-gray"></i></td>
<td><i class="z-font z-setting z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-setting z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-setting z-text-yellow"></i></td>
<td><i class="z-font z-setting z-text-green"></i></td>
<td><i class="z-font z-setting z-text-cyan"></i></td>
<td><i class="z-font z-setting z-text-blue"></i></td>
<td><i class="z-font z-setting z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-share</td>
<td class="z-samp">&amp;#xf010;</td>
<td><i class="z-font z-share"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-share z-text-white"></i></td>
<td><i class="z-font z-share z-text-gray"></i></td>
<td><i class="z-font z-share z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-share z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-share z-text-yellow"></i></td>
<td><i class="z-font z-share z-text-green"></i></td>
<td><i class="z-font z-share z-text-cyan"></i></td>
<td><i class="z-font z-share z-text-blue"></i></td>
<td><i class="z-font z-share z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-download</td>
<td class="z-samp">&amp;#xf011;</td>
<td><i class="z-font z-download"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-download z-text-white"></i></td>
<td><i class="z-font z-download z-text-gray"></i></td>
<td><i class="z-font z-download z-text-red zi-px20"></i>&nbsp;<span class="zi-px20">字体</span></td>
<td><i class="z-font z-download z-text-orange zi-px18"></i>&nbsp;<span class="zi-px18">字体</span></td>
<td><i class="z-font z-download z-text-yellow"></i></td>
<td><i class="z-font z-download z-text-green"></i></td>
<td><i class="z-font z-download z-text-cyan"></i></td>
<td><i class="z-font z-download z-text-blue"></i></td>
<td><i class="z-font z-download z-text-purple"></i></td>
</tr>
</table>
<#-- 文档类 -->
<div class="tutorial title">二、文档类图标，编码范围（f040-f05f），共10个</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="10%">编码</td>
<td width="*" colspan="10">图标</td>
</tr>
<tr>
<td class="z-samp">.z-font.z-folder</td>
<td class="z-samp">&amp;#xf040;</td>
<td width="7%"><i class="z-font z-folder"></i>&nbsp;字体</td>
<td width="6%" class="z-bg-black"><i class="z-font z-folder z-text-white"></i></td>
<td width="6%"><i class="z-font z-folder z-text-gray"></i></td>
<td width="6%"><i class="z-font z-folder z-text-red zi-px20"></i></td>
<td width="6%"><i class="z-font z-folder z-text-orange zi-px18"></i></td>
<td width="6%"><i class="z-font z-folder z-text-yellow"></i></td>
<td width="6%"><i class="z-font z-folder z-text-green"></i></td>
<td width="6%"><i class="z-font z-folder z-text-cyan"></i></td>
<td width="6%"><i class="z-font z-folder z-text-blue"></i></td>
<td width="6%"><i class="z-font z-folder z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-collect</td>
<td class="z-samp">&amp;#xf041;</td>
<td><i class="z-font z-collect"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-collect z-text-white"></i></td>
<td><i class="z-font z-collect z-text-gray"></i></td>
<td><i class="z-font z-collect z-text-red zi-px20"></i></td>
<td><i class="z-font z-collect z-text-orange zi-px18"></i></td>
<td><i class="z-font z-collect z-text-yellow"></i></td>
<td><i class="z-font z-collect z-text-green"></i></td>
<td><i class="z-font z-collect z-text-cyan"></i></td>
<td><i class="z-font z-collect z-text-blue"></i></td>
<td><i class="z-font z-collect z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-briefcase</td>
<td class="z-samp">&amp;#xf042;</td>
<td><i class="z-font z-briefcase"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-briefcase z-text-white"></i></td>
<td><i class="z-font z-briefcase z-text-gray"></i></td>
<td><i class="z-font z-briefcase z-text-red zi-px20"></i></td>
<td><i class="z-font z-briefcase z-text-orange zi-px18"></i></td>
<td><i class="z-font z-briefcase z-text-yellow"></i></td>
<td><i class="z-font z-briefcase z-text-green"></i></td>
<td><i class="z-font z-briefcase z-text-cyan"></i></td>
<td><i class="z-font z-briefcase z-text-blue"></i></td>
<td><i class="z-font z-briefcase z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-image-text</td>
<td class="z-samp">&amp;#xf043;</td>
<td><i class="z-font z-image-text"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-image-text z-text-white"></i></td>
<td><i class="z-font z-image-text z-text-gray"></i></td>
<td><i class="z-font z-image-text z-text-red zi-px20"></i></td>
<td><i class="z-font z-image-text z-text-orange zi-px18"></i></td>
<td><i class="z-font z-image-text z-text-yellow"></i></td>
<td><i class="z-font z-image-text z-text-green"></i></td>
<td><i class="z-font z-image-text z-text-cyan"></i></td>
<td><i class="z-font z-image-text z-text-blue"></i></td>
<td><i class="z-font z-image-text z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-text</td>
<td class="z-samp">&amp;#xf044;</td>
<td><i class="z-font z-text"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-text z-text-white"></i></td>
<td><i class="z-font z-text z-text-gray"></i></td>
<td><i class="z-font z-text z-text-red zi-px20"></i></td>
<td><i class="z-font z-text z-text-orange zi-px18"></i></td>
<td><i class="z-font z-text z-text-yellow"></i></td>
<td><i class="z-font z-text z-text-green"></i></td>
<td><i class="z-font z-text z-text-cyan"></i></td>
<td><i class="z-font z-text z-text-blue"></i></td>
<td><i class="z-font z-text z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-picture</td>
<td class="z-samp">&amp;#xf045;</td>
<td><i class="z-font z-picture"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-picture z-text-white"></i></td>
<td><i class="z-font z-picture z-text-gray"></i></td>
<td><i class="z-font z-picture z-text-red zi-px20"></i></td>
<td><i class="z-font z-picture z-text-orange zi-px18"></i></td>
<td><i class="z-font z-picture z-text-yellow"></i></td>
<td><i class="z-font z-picture z-text-green"></i></td>
<td><i class="z-font z-picture z-text-cyan"></i></td>
<td><i class="z-font z-picture z-text-blue"></i></td>
<td><i class="z-font z-picture z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-video</td>
<td class="z-samp">&amp;#xf046;</td>
<td><i class="z-font z-video"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-video z-text-white"></i></td>
<td><i class="z-font z-video z-text-gray"></i></td>
<td><i class="z-font z-video z-text-red zi-px20"></i></td>
<td><i class="z-font z-video z-text-orange zi-px18"></i></td>
<td><i class="z-font z-video z-text-yellow"></i></td>
<td><i class="z-font z-video z-text-green"></i></td>
<td><i class="z-font z-video z-text-cyan"></i></td>
<td><i class="z-font z-video z-text-blue"></i></td>
<td><i class="z-font z-video z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-voice</td>
<td class="z-samp">&amp;#xf047;</td>
<td><i class="z-font z-voice"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-voice z-text-white"></i></td>
<td><i class="z-font z-voice z-text-gray"></i></td>
<td><i class="z-font z-voice z-text-red zi-px20"></i></td>
<td><i class="z-font z-voice z-text-orange zi-px18"></i></td>
<td><i class="z-font z-voice z-text-yellow"></i></td>
<td><i class="z-font z-voice z-text-green"></i></td>
<td><i class="z-font z-voice z-text-cyan"></i></td>
<td><i class="z-font z-voice z-text-blue"></i></td>
<td><i class="z-font z-voice z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-camera</td>
<td class="z-samp">&amp;#xf048;</td>
<td><i class="z-font z-camera"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-camera z-text-white"></i></td>
<td><i class="z-font z-camera z-text-gray"></i></td>
<td><i class="z-font z-camera z-text-red zi-px20"></i></td>
<td><i class="z-font z-camera z-text-orange zi-px18"></i></td>
<td><i class="z-font z-camera z-text-yellow"></i></td>
<td><i class="z-font z-camera z-text-green"></i></td>
<td><i class="z-font z-camera z-text-cyan"></i></td>
<td><i class="z-font z-camera z-text-blue"></i></td>
<td><i class="z-font z-camera z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-print</td>
<td class="z-samp">&amp;#xf049;</td>
<td><i class="z-font z-print"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-print z-text-white"></i></td>
<td><i class="z-font z-print z-text-gray"></i></td>
<td><i class="z-font z-print z-text-red zi-px20"></i></td>
<td><i class="z-font z-print z-text-orange zi-px18"></i></td>
<td><i class="z-font z-print z-text-yellow"></i></td>
<td><i class="z-font z-print z-text-green"></i></td>
<td><i class="z-font z-print z-text-cyan"></i></td>
<td><i class="z-font z-print z-text-blue"></i></td>
<td><i class="z-font z-print z-text-purple"></i></td>
</tr>
</table>
<#-- 设备类 -->
<div class="tutorial title">三、设备类图标，编码范围（f060-f07f），共9个</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="10%">编码</td>
<td width="*" colspan="10">图标</td>
</tr>
<tr>
<td class="z-samp">.z-font.z-computer</td>
<td class="z-samp">&amp;#xf060;</td>
<td width="7%"><i class="z-font z-computer"></i>&nbsp;字体</td>
<td width="6%" class="z-bg-black"><i class="z-font z-computer z-text-white"></i></td>
<td width="6%"><i class="z-font z-computer z-text-gray"></i></td>
<td width="6%"><i class="z-font z-computer z-text-red zi-px20"></i></td>
<td width="6%"><i class="z-font z-computer z-text-orange zi-px18"></i></td>
<td width="6%"><i class="z-font z-computer z-text-yellow"></i></td>
<td width="6%"><i class="z-font z-computer z-text-green"></i></td>
<td width="6%"><i class="z-font z-computer z-text-cyan"></i></td>
<td width="6%"><i class="z-font z-computer z-text-blue"></i></td>
<td width="6%"><i class="z-font z-computer z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-phone</td>
<td class="z-samp">&amp;#xf061;</td>
<td><i class="z-font z-phone"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-phone z-text-white"></i></td>
<td><i class="z-font z-phone z-text-gray"></i></td>
<td><i class="z-font z-phone z-text-red zi-px20"></i></td>
<td><i class="z-font z-phone z-text-orange zi-px18"></i></td>
<td><i class="z-font z-phone z-text-yellow"></i></td>
<td><i class="z-font z-phone z-text-green"></i></td>
<td><i class="z-font z-phone z-text-cyan"></i></td>
<td><i class="z-font z-phone z-text-blue"></i></td>
<td><i class="z-font z-phone z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-monitor</td>
<td class="z-samp">&amp;#xf062;</td>
<td><i class="z-font z-monitor"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-monitor z-text-white"></i></td>
<td><i class="z-font z-monitor z-text-gray"></i></td>
<td><i class="z-font z-monitor z-text-red zi-px20"></i></td>
<td><i class="z-font z-monitor z-text-orange zi-px18"></i></td>
<td><i class="z-font z-monitor z-text-yellow"></i></td>
<td><i class="z-font z-monitor z-text-green"></i></td>
<td><i class="z-font z-monitor z-text-cyan"></i></td>
<td><i class="z-font z-monitor z-text-blue"></i></td>
<td><i class="z-font z-monitor z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-email</td>
<td class="z-samp">&amp;#xf063;</td>
<td><i class="z-font z-email"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-email z-text-white"></i></td>
<td><i class="z-font z-email z-text-gray"></i></td>
<td><i class="z-font z-email z-text-red zi-px20"></i></td>
<td><i class="z-font z-email z-text-orange zi-px18"></i></td>
<td><i class="z-font z-email z-text-yellow"></i></td>
<td><i class="z-font z-email z-text-green"></i></td>
<td><i class="z-font z-email z-text-cyan"></i></td>
<td><i class="z-font z-email z-text-blue"></i></td>
<td><i class="z-font z-email z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-internet</td>
<td class="z-samp">&amp;#xf064;</td>
<td><i class="z-font z-internet"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-internet z-text-white"></i></td>
<td><i class="z-font z-internet z-text-gray"></i></td>
<td><i class="z-font z-internet z-text-red zi-px20"></i></td>
<td><i class="z-font z-internet z-text-orange zi-px18"></i></td>
<td><i class="z-font z-internet z-text-yellow"></i></td>
<td><i class="z-font z-internet z-text-green"></i></td>
<td><i class="z-font z-internet z-text-cyan"></i></td>
<td><i class="z-font z-internet z-text-blue"></i></td>
<td><i class="z-font z-internet z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-switch</td>
<td class="z-samp">&amp;#xf065;</td>
<td><i class="z-font z-switch"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-switch z-text-white"></i></td>
<td><i class="z-font z-switch z-text-gray"></i></td>
<td><i class="z-font z-switch z-text-red zi-px20"></i></td>
<td><i class="z-font z-switch z-text-orange zi-px18"></i></td>
<td><i class="z-font z-switch z-text-yellow"></i></td>
<td><i class="z-font z-switch z-text-green"></i></td>
<td><i class="z-font z-switch z-text-cyan"></i></td>
<td><i class="z-font z-switch z-text-blue"></i></td>
<td><i class="z-font z-switch z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-wifi</td>
<td class="z-samp">&amp;#xf066;</td>
<td><i class="z-font z-wifi"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-wifi z-text-white"></i></td>
<td><i class="z-font z-wifi z-text-gray"></i></td>
<td><i class="z-font z-wifi z-text-red zi-px20"></i></td>
<td><i class="z-font z-wifi z-text-orange zi-px18"></i></td>
<td><i class="z-font z-wifi z-text-yellow"></i></td>
<td><i class="z-font z-wifi z-text-green"></i></td>
<td><i class="z-font z-wifi z-text-cyan"></i></td>
<td><i class="z-font z-wifi z-text-blue"></i></td>
<td><i class="z-font z-wifi z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-cloud</td>
<td class="z-samp">&amp;#xf067;</td>
<td><i class="z-font z-cloud"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-cloud z-text-white"></i></td>
<td><i class="z-font z-cloud z-text-gray"></i></td>
<td><i class="z-font z-cloud z-text-red zi-px20"></i></td>
<td><i class="z-font z-cloud z-text-orange zi-px18"></i></td>
<td><i class="z-font z-cloud z-text-yellow"></i></td>
<td><i class="z-font z-cloud z-text-green"></i></td>
<td><i class="z-font z-cloud z-text-cyan"></i></td>
<td><i class="z-font z-cloud z-text-blue"></i></td>
<td><i class="z-font z-cloud z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-port</td>
<td class="z-samp">&amp;#xf068;</td>
<td><i class="z-font z-port"></i>&nbsp;字体</td>
<td class="z-bg-black"><i class="z-font z-port z-text-white"></i></td>
<td><i class="z-font z-port z-text-gray"></i></td>
<td><i class="z-font z-port z-text-red zi-px20"></i></td>
<td><i class="z-font z-port z-text-orange zi-px18"></i></td>
<td><i class="z-font z-port z-text-yellow"></i></td>
<td><i class="z-font z-port z-text-green"></i></td>
<td><i class="z-font z-port z-text-cyan"></i></td>
<td><i class="z-font z-port z-text-blue"></i></td>
<td><i class="z-font z-port z-text-purple"></i></td>
</tr>
</table>
<#-- 图表类 -->
<div class="tutorial title">四、图表类图标，编码范围（f080-f09f），共14个</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="10%">编码</td>
<td width="*" colspan="10">图标</td>
</tr>
<tr>
<td class="z-samp">.z-font.z-list</td>
<td class="z-samp">&amp;#xf080;</td>
<td width="6%"><i class="z-font z-list"></i></td>
<td width="6%" class="z-bg-black"><i class="z-font z-list z-text-white"></i></td>
<td width="6%"><i class="z-font z-list z-text-gray"></i></td>
<td width="6%"><i class="z-font z-list z-text-red zi-px20"></i></td>
<td width="6%"><i class="z-font z-list z-text-orange zi-px18"></i></td>
<td width="6%"><i class="z-font z-list z-text-yellow"></i></td>
<td width="6%"><i class="z-font z-list z-text-green"></i></td>
<td width="6%"><i class="z-font z-list z-text-cyan"></i></td>
<td width="6%"><i class="z-font z-list z-text-blue"></i></td>
<td width="6%"><i class="z-font z-list z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-apps</td>
<td class="z-samp">&amp;#xf081;</td>
<td><i class="z-font z-apps"></i></td>
<td class="z-bg-black"><i class="z-font z-apps z-text-white"></i></td>
<td><i class="z-font z-apps z-text-gray"></i></td>
<td><i class="z-font z-apps z-text-red zi-px20"></i></td>
<td><i class="z-font z-apps z-text-orange zi-px18"></i></td>
<td><i class="z-font z-apps z-text-yellow"></i></td>
<td><i class="z-font z-apps z-text-green"></i></td>
<td><i class="z-font z-apps z-text-cyan"></i></td>
<td><i class="z-font z-apps z-text-blue"></i></td>
<td><i class="z-font z-apps z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-pie-chart</td>
<td class="z-samp">&amp;#xf082;</td>
<td><i class="z-font z-pie-chart"></i></td>
<td class="z-bg-black"><i class="z-font z-pie-chart z-text-white"></i></td>
<td><i class="z-font z-pie-chart z-text-gray"></i></td>
<td><i class="z-font z-pie-chart z-text-red zi-px20"></i></td>
<td><i class="z-font z-pie-chart z-text-orange zi-px18"></i></td>
<td><i class="z-font z-pie-chart z-text-yellow"></i></td>
<td><i class="z-font z-pie-chart z-text-green"></i></td>
<td><i class="z-font z-pie-chart z-text-cyan"></i></td>
<td><i class="z-font z-pie-chart z-text-blue"></i></td>
<td><i class="z-font z-pie-chart z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-histogram</td>
<td class="z-samp">&amp;#xf083;</td>
<td><i class="z-font z-histogram"></i></td>
<td class="z-bg-black"><i class="z-font z-histogram z-text-white"></i></td>
<td><i class="z-font z-histogram z-text-gray"></i></td>
<td><i class="z-font z-histogram z-text-red zi-px20"></i></td>
<td><i class="z-font z-histogram z-text-orange zi-px18"></i></td>
<td><i class="z-font z-histogram z-text-yellow"></i></td>
<td><i class="z-font z-histogram z-text-green"></i></td>
<td><i class="z-font z-histogram z-text-cyan"></i></td>
<td><i class="z-font z-histogram z-text-blue"></i></td>
<td><i class="z-font z-histogram z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-graph</td>
<td class="z-samp">&amp;#xf084;</td>
<td><i class="z-font z-graph"></i></td>
<td class="z-bg-black"><i class="z-font z-graph z-text-white"></i></td>
<td><i class="z-font z-graph z-text-gray"></i></td>
<td><i class="z-font z-graph z-text-red zi-px20"></i></td>
<td><i class="z-font z-graph z-text-orange zi-px18"></i></td>
<td><i class="z-font z-graph z-text-yellow"></i></td>
<td><i class="z-font z-graph z-text-green"></i></td>
<td><i class="z-font z-graph z-text-cyan"></i></td>
<td><i class="z-font z-graph z-text-blue"></i></td>
<td><i class="z-font z-graph z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-diagram</td>
<td class="z-samp">&amp;#xf085;</td>
<td><i class="z-font z-diagram"></i></td>
<td class="z-bg-black"><i class="z-font z-diagram z-text-white"></i></td>
<td><i class="z-font z-diagram z-text-gray"></i></td>
<td><i class="z-font z-diagram z-text-red zi-px20"></i></td>
<td><i class="z-font z-diagram z-text-orange zi-px18"></i></td>
<td><i class="z-font z-diagram z-text-yellow"></i></td>
<td><i class="z-font z-diagram z-text-green"></i></td>
<td><i class="z-font z-diagram z-text-cyan"></i></td>
<td><i class="z-font z-diagram z-text-blue"></i></td>
<td><i class="z-font z-diagram z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrow-down</td>
<td class="z-samp">&amp;#xf086;</td>
<td><i class="z-font z-arrow-down"></i></td>
<td class="z-bg-black"><i class="z-font z-arrow-down z-text-white"></i></td>
<td><i class="z-font z-arrow-down z-text-gray"></i></td>
<td><i class="z-font z-arrow-down z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrow-down z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrow-down z-text-yellow"></i></td>
<td><i class="z-font z-arrow-down z-text-green"></i></td>
<td><i class="z-font z-arrow-down z-text-cyan"></i></td>
<td><i class="z-font z-arrow-down z-text-blue"></i></td>
<td><i class="z-font z-arrow-down z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrow-up</td>
<td class="z-samp">&amp;#xf087;</td>
<td><i class="z-font z-arrow-up"></i></td>
<td class="z-bg-black"><i class="z-font z-arrow-up z-text-white"></i></td>
<td><i class="z-font z-arrow-up z-text-gray"></i></td>
<td><i class="z-font z-arrow-up z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrow-up z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrow-up z-text-yellow"></i></td>
<td><i class="z-font z-arrow-up z-text-green"></i></td>
<td><i class="z-font z-arrow-up z-text-cyan"></i></td>
<td><i class="z-font z-arrow-up z-text-blue"></i></td>
<td><i class="z-font z-arrow-up z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrow-left</td>
<td class="z-samp">&amp;#xf088;</td>
<td><i class="z-font z-arrow-left"></i></td>
<td class="z-bg-black"><i class="z-font z-arrow-left z-text-white"></i></td>
<td><i class="z-font z-arrow-left z-text-gray"></i></td>
<td><i class="z-font z-arrow-left z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrow-left z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrow-left z-text-yellow"></i></td>
<td><i class="z-font z-arrow-left z-text-green"></i></td>
<td><i class="z-font z-arrow-left z-text-cyan"></i></td>
<td><i class="z-font z-arrow-left z-text-blue"></i></td>
<td><i class="z-font z-arrow-left z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrow-right</td>
<td class="z-samp">&amp;#xf089;</td>
<td><i class="z-font z-arrow-right"></i></td>
<td class="z-bg-black"><i class="z-font z-arrow-right z-text-white"></i></td>
<td><i class="z-font z-arrow-right z-text-gray"></i></td>
<td><i class="z-font z-arrow-right z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrow-right z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrow-right z-text-yellow"></i></td>
<td><i class="z-font z-arrow-right z-text-green"></i></td>
<td><i class="z-font z-arrow-right z-text-cyan"></i></td>
<td><i class="z-font z-arrow-right z-text-blue"></i></td>
<td><i class="z-font z-arrow-right z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrowhead-down</td>
<td class="z-samp">&amp;#xf08a;</td>
<td><i class="z-font z-arrowhead-down"></i></td>
<td class="z-bg-black"><i class="z-font z-arrowhead-down z-text-white"></i></td>
<td><i class="z-font z-arrowhead-down z-text-gray"></i></td>
<td><i class="z-font z-arrowhead-down z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrowhead-down z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrowhead-down z-text-yellow"></i></td>
<td><i class="z-font z-arrowhead-down z-text-green"></i></td>
<td><i class="z-font z-arrowhead-down z-text-cyan"></i></td>
<td><i class="z-font z-arrowhead-down z-text-blue"></i></td>
<td><i class="z-font z-arrowhead-down z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrowhead-up</td>
<td class="z-samp">&amp;#xf08b;</td>
<td><i class="z-font z-arrowhead-up"></i></td>
<td class="z-bg-black"><i class="z-font z-arrowhead-up z-text-white"></i></td>
<td><i class="z-font z-arrowhead-up z-text-gray"></i></td>
<td><i class="z-font z-arrowhead-up z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrowhead-up z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrowhead-up z-text-yellow"></i></td>
<td><i class="z-font z-arrowhead-up z-text-green"></i></td>
<td><i class="z-font z-arrowhead-up z-text-cyan"></i></td>
<td><i class="z-font z-arrowhead-up z-text-blue"></i></td>
<td><i class="z-font z-arrowhead-up z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrowhead-left</td>
<td class="z-samp">&amp;#xf08c;</td>
<td><i class="z-font z-arrowhead-left"></i></td>
<td class="z-bg-black"><i class="z-font z-arrowhead-left z-text-white"></i></td>
<td><i class="z-font z-arrowhead-left z-text-gray"></i></td>
<td><i class="z-font z-arrowhead-left z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrowhead-left z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrowhead-left z-text-yellow"></i></td>
<td><i class="z-font z-arrowhead-left z-text-green"></i></td>
<td><i class="z-font z-arrowhead-left z-text-cyan"></i></td>
<td><i class="z-font z-arrowhead-left z-text-blue"></i></td>
<td><i class="z-font z-arrowhead-left z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-arrowhead-right</td>
<td class="z-samp">&amp;#xf08c;</td>
<td><i class="z-font z-arrowhead-right"></i></td>
<td class="z-bg-black"><i class="z-font z-arrowhead-right z-text-white"></i></td>
<td><i class="z-font z-arrowhead-right z-text-gray"></i></td>
<td><i class="z-font z-arrowhead-right z-text-red zi-px20"></i></td>
<td><i class="z-font z-arrowhead-right z-text-orange zi-px18"></i></td>
<td><i class="z-font z-arrowhead-right z-text-yellow"></i></td>
<td><i class="z-font z-arrowhead-right z-text-green"></i></td>
<td><i class="z-font z-arrowhead-right z-text-cyan"></i></td>
<td><i class="z-font z-arrowhead-right z-text-blue"></i></td>
<td><i class="z-font z-arrowhead-right z-text-purple"></i></td>
</tr>
</table>
<#-- 实体类 -->
<div class="tutorial title">五、实体类图标，编码范围（f0a0-f0bf），共8个</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="10%">编码</td>
<td width="*" colspan="10">图标</td>
</tr>
<tr>
<td class="z-samp">.z-font.z-customer</td>
<td class="z-samp">&amp;#xf0a0;</td>
<td width="6%"><i class="z-font z-customer"></i></td>
<td width="6%" class="z-bg-black"><i class="z-font z-customer z-text-white"></i></td>
<td width="6%"><i class="z-font z-customer z-text-gray"></i></td>
<td width="6%"><i class="z-font z-customer z-text-red zi-px20"></i></td>
<td width="6%"><i class="z-font z-customer z-text-orange zi-px18"></i></td>
<td width="6%"><i class="z-font z-customer z-text-yellow"></i></td>
<td width="6%"><i class="z-font z-customer z-text-green"></i></td>
<td width="6%"><i class="z-font z-customer z-text-cyan"></i></td>
<td width="6%"><i class="z-font z-customer z-text-blue"></i></td>
<td width="6%"><i class="z-font z-customer z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-cash</td>
<td class="z-samp">&amp;#xf0a1;</td>
<td><i class="z-font z-cash"></i></td>
<td class="z-bg-black"><i class="z-font z-cash z-text-white"></i></td>
<td><i class="z-font z-cash z-text-gray"></i></td>
<td><i class="z-font z-cash z-text-red zi-px20"></i></td>
<td><i class="z-font z-cash z-text-orange zi-px18"></i></td>
<td><i class="z-font z-cash z-text-yellow"></i></td>
<td><i class="z-font z-cash z-text-green"></i></td>
<td><i class="z-font z-cash z-text-cyan"></i></td>
<td><i class="z-font z-cash z-text-blue"></i></td>
<td><i class="z-font z-cash z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-house</td>
<td class="z-samp">&amp;#xf0a2;</td>
<td><i class="z-font z-house"></i></td>
<td class="z-bg-black"><i class="z-font z-house z-text-white"></i></td>
<td><i class="z-font z-house z-text-gray"></i></td>
<td><i class="z-font z-house z-text-red zi-px20"></i></td>
<td><i class="z-font z-house z-text-orange zi-px18"></i></td>
<td><i class="z-font z-house z-text-yellow"></i></td>
<td><i class="z-font z-house z-text-green"></i></td>
<td><i class="z-font z-house z-text-cyan"></i></td>
<td><i class="z-font z-house z-text-blue"></i></td>
<td><i class="z-font z-house z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-flower</td>
<td class="z-samp">&amp;#xf0a3;</td>
<td><i class="z-font z-flower"></i></td>
<td class="z-bg-black"><i class="z-font z-flower z-text-white"></i></td>
<td><i class="z-font z-flower z-text-gray"></i></td>
<td><i class="z-font z-flower z-text-red zi-px20"></i></td>
<td><i class="z-font z-flower z-text-orange zi-px18"></i></td>
<td><i class="z-font z-flower z-text-yellow"></i></td>
<td><i class="z-font z-flower z-text-green"></i></td>
<td><i class="z-font z-flower z-text-cyan"></i></td>
<td><i class="z-font z-flower z-text-blue"></i></td>
<td><i class="z-font z-flower z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-box</td>
<td class="z-samp">&amp;#xf0a4;</td>
<td><i class="z-font z-box"></i></td>
<td class="z-bg-black"><i class="z-font z-box z-text-white"></i></td>
<td><i class="z-font z-box z-text-gray"></i></td>
<td><i class="z-font z-box z-text-red zi-px20"></i></td>
<td><i class="z-font z-box z-text-orange zi-px18"></i></td>
<td><i class="z-font z-box z-text-yellow"></i></td>
<td><i class="z-font z-box z-text-green"></i></td>
<td><i class="z-font z-box z-text-cyan"></i></td>
<td><i class="z-font z-box z-text-blue"></i></td>
<td><i class="z-font z-box z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-desk</td>
<td class="z-samp">&amp;#xf0a5;</td>
<td><i class="z-font z-desk"></i></td>
<td class="z-bg-black"><i class="z-font z-desk z-text-white"></i></td>
<td><i class="z-font z-desk z-text-gray"></i></td>
<td><i class="z-font z-desk z-text-red zi-px20"></i></td>
<td><i class="z-font z-desk z-text-orange zi-px18"></i></td>
<td><i class="z-font z-desk z-text-yellow"></i></td>
<td><i class="z-font z-desk z-text-green"></i></td>
<td><i class="z-font z-desk z-text-cyan"></i></td>
<td><i class="z-font z-desk z-text-blue"></i></td>
<td><i class="z-font z-desk z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-gift</td>
<td class="z-samp">&amp;#xf0a6;</td>
<td><i class="z-font z-gift"></i></td>
<td class="z-bg-black"><i class="z-font z-gift z-text-white"></i></td>
<td><i class="z-font z-gift z-text-gray"></i></td>
<td><i class="z-font z-gift z-text-red zi-px20"></i></td>
<td><i class="z-font z-gift z-text-orange zi-px18"></i></td>
<td><i class="z-font z-gift z-text-yellow"></i></td>
<td><i class="z-font z-gift z-text-green"></i></td>
<td><i class="z-font z-gift z-text-cyan"></i></td>
<td><i class="z-font z-gift z-text-blue"></i></td>
<td><i class="z-font z-gift z-text-purple"></i></td>
</tr>
<tr>
<td class="z-samp">.z-font.z-lock</td>
<td class="z-samp">&amp;#xf0a7;</td>
<td><i class="z-font z-lock"></i></td>
<td class="z-bg-black"><i class="z-font z-lock z-text-white"></i></td>
<td><i class="z-font z-lock z-text-gray"></i></td>
<td><i class="z-font z-lock z-text-red zi-px20"></i></td>
<td><i class="z-font z-lock z-text-orange zi-px18"></i></td>
<td><i class="z-font z-lock z-text-yellow"></i></td>
<td><i class="z-font z-lock z-text-green"></i></td>
<td><i class="z-font z-lock z-text-cyan"></i></td>
<td><i class="z-font z-lock z-text-blue"></i></td>
<td><i class="z-font z-lock z-text-purple"></i></td>
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/css/rem.htm
+440
View File
@@ -0,0 +1,440 @@
<#def title = "使用rem"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "ZmUI整体风格使用rem作为长度单位，它是相对于html元素的font-size的一个单位。建议大家对需要适应页面大小的任何元素都使用rem为单位来定义。"/>
<#def prevUrl = "css.htm"/>
<#def nextUrl = "color.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "css", "rem")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "使用rem")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">使用rem：</p>
<p class="z-color-333" style="text-indent:38px;">
ZmUI整体风格使用 rem 作为长度单位，它是相对于 html 元素的 font-size 的一个单位。建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。<br>
关于其定义，可以参考 <a class="zi-text-blue z-weight-normal" href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" target="_blank">MDN上的定义</a>。
</p>
</div>
<#-- HTML 标签的 font-size 定义 -->
<div class="tutorial title">HTML 标签的 font-size 定义</div>
<div class="z-float-left z-w100p z-lh200p">
<div class="z-pd10 z-px18 z-lh200p">一、以 iphone6 为基准</div>
<div class="z-pd10 z-px16">
以 iphone6 的屏宽 375 作为媒体查询 font-size 计算的标准，再向更大更小进行变化；<br>
此时 html 标签的 font-size 为 100px，默认字体大小为 .16rem(16px)，所有以 rem 定义的大小、长度均以此为基准进行计算。</div>
</div>
<div class="z-float-left z-w100p">
<div class="z-pd10 z-px18 z-lh200p">二、媒体查询计算 font-size</div>
<div class="z-pd10">
<span class="z-text-prewrap z-pre">
@media screen and (max-width: 320px) {
html {
font-size:83.33px;
font-size:26.66667vw
}
}
...
@media screen and (min-width: 376px) and (max-width:393px) {
html {
font-size:104.8px;
font-size:26.66667vw
}
}
...
@media screen and (min-width: 769px) {
html {
font-size:204.8px
}
}
</span>
</div>
</div>
<#-- 通用的字体大小定义 -->
<div class="tutorial title">通用的字体大小定义</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
<ul>
<li>暂时保留 ZhiqimUI 中 px 的定义，如：z-px12、zi-px20。</li>
<li>新增 rem 的定义方式，如：z-rem12、zi-rem20，分别表示 font-size:.12rem 和 font-size:.2rem !important。</li>
</ul>
<span class="z-text-prewrap z-pre">
.z-px10{font-size:10px;}
.z-px11{font-size:11px;}
.z-px12{font-size:12px;}
.z-px13{font-size:13px;}
.z-px14{font-size:14px;}
.z-px15{font-size:15px;}
.z-px16{font-size:16px;}
.z-px17{font-size:17px;}
.z-px18{font-size:18px;}
.z-px19{font-size:19px;}
.z-px20{font-size:20px;}
.z-px22{font-size:22px;}
.z-px24{font-size:24px;}
.z-px26{font-size:26px;}
.z-px30{font-size:30px;}
.z-px40{font-size:40px;}
.z-px50{font-size:50px;}
.zi-px10{font-size:10px !important;}
...
.zi-px50{font-size:50px !important;}
.z-rem12{font-size:.12rem;}
.z-rem13{font-size:.13rem;}
.z-rem14{font-size:.14rem;}
.z-rem15{font-size:.15rem;}
.z-rem16{font-size:.16rem;}
.z-rem17{font-size:.17rem;}
.z-rem18{font-size:.18rem;}
.z-rem19{font-size:.19rem;}
.z-rem20{font-size:.2rem;}
.z-rem22{font-size:.22rem;}
.z-rem24{font-size:.24rem;}
.z-rem25{font-size:.25rem;}
.z-rem26{font-size:.26rem;}
.z-rem28{font-size:.28rem;}
.z-rem30{font-size:.3rem;}
.z-rem32{font-size:.32rem;}
.z-rem35{font-size:.35rem;}
.z-rem36{font-size:.36rem;}
.z-rem40{font-size:.4rem;}
.z-rem50{font-size:.50rem;}
.zi-rem12{font-size:.12rem !important;}
...
.zi-rem50{font-size:.50rem !important;}
</span>
</div>
<#-- width 和 height 定义 -->
<div class="tutorial title">width 和 height 定义</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
<ul>
<li>原 ZhiqimUI 中的定义具体数值的 z-w*、z-h* ，如： z-w100、z-h100；统一改成用 z- 前缀，单位为 rem，如： z-w100、z-h100。</li>
<li>原 ZhiqimUI 中的定义百分比的 z-w5p、z-h50p 保留。</li>
</ul>
<span class="z-text-prewrap z-pre">
.z-w0{width:0;}
.z-w10{width:.1rem;}.z-w12{width:.12rem;}
.z-w14{width:.14rem;}.z-w15{width:.15rem;}
.z-w16{width:.16rem;}.z-w18{width:.18rem;}
.z-w20{width:.2rem;}.z-w22{width:.22rem;}
.z-w24{width:.24rem;}.z-w25{width:.25rem;}
.z-w28{width:.28rem;}.z-w30{width:.3rem;}
.z-w35{width:.35rem;}.z-w40{width:.4rem;}
.z-w45{width:.45rem;}.z-w50{width:.5rem;}
.z-w55{width:.55rem;}.z-w60{width:.6rem;}
.z-w65{width:.65rem;}.z-w70{width:.7rem;}
.z-w75{width:.75rem;}.z-w80{width:.8rem;}
.z-w85{width:.85rem;}.z-w90{width:.9rem;}
.z-w95{width:.95rem;}.z-w100{width:1rem;}
.z-w110{width:1.1rem;}.z-w120{width:1.2rem;}
.z-w130{width:1.3rem;}.z-w140{width:1.4rem;}
.z-w150{width:1.5rem;}.z-w160{width:1.6rem;}
.z-w170{width:1.7rem;}.z-w180{width:1.8rem;}
.z-w190{width:1.9rem;}.z-w200{width:2rem;}
.z-w230{width:2.3rem;}.z-w250{width:2.5rem;}
.z-w270{width:2.7rem;}.z-w300{width:3rem;}
.z-w400{width:4rem;}.z-w500{width:5rem;}
.z-w600{width:6rem;}.z-w700{width:7rem;}
.z-w800{width:8rem;}
.zi-w0{width:0 !important;}
...
.zi-w800{width:8rem !important;}
.z-w5p{width:5%;}.z-w8p{width:8%;}
.z-w10p{width:10%;}.z-w12p{width:12%;}
.z-w15p{width:15%;}.z-w30p{width:30%;}
.z-w40p{width:40%;}.z-w60p{width:60%;}
.z-w70p{width:70%;}.z-w80p{width:80%;}
.z-w90p{width:90%;}.z-w100p{width:100%;}
.z-w100p2,.z-w50p{width:50%;}
.z-w100p3{width:33.333333%;}
.z-w100p4,.z-w25p{width:25%;}
.z-w100p5,.z-w20p{width:20%;}
.z-w100p6{width:16.666666%;}
.z-w100p7{width:14.285714%;}
.z-w100p8{width:12.5%;}
.z-w100p9{width:11.111111%;}
.zi-w5p{width:5% !important;}.zi-w8p{width:8% !important;}
...
.zi-w100p9{width:11.111111% !important;}
.z-h0{height:0;}
.z-h10{height:.1rem;}.z-h12{height:.12rem;}
.z-h14{height:.14rem;}.z-h15{height:.15rem;}
.z-h16{height:.16rem;}.z-h18{height:.18rem;}
.z-h20{height:.2rem;}.z-h22{height:.22rem;}
.z-h24{height:.24rem;}.z-h25{height:.25rem;}
.z-h28{height:.28rem;}.z-h30{height:.3rem;}
.z-h32{height:.32rem;}.z-h35{height:.35rem;}
.z-h40{height:.4rem;}.z-h45{height:.45rem;}
.z-h50{height:.5rem;}.z-h55{height:.55rem;}
.z-h60{height:.6rem;}.z-h65{height:.65rem;}
.z-h70{height:.7rem;}.z-h75{height:.75rem;}
.z-h80{height:.8rem;}.z-h85{height:.85rem;}
.z-h90{height:.9rem;}.z-h95{height:.95rem;}
.z-h100{height:1rem;}.z-h110{height:1.1rem;}
.z-h120{height:1.2rem;}.z-h130{height:1.3rem;}
.z-h140{height:1.4rem;}.z-h150{height:1.5rem;}
.z-h160{height:1.6rem;}.z-h170{height:1.7rem;}
.z-h180{height:1.8rem;}.z-h190{height:1.9rem;}
.z-h200{height:2rem;}.z-h300{height:3rem;}
.z-h400{height:4rem;}.z-h500{height:5rem;}
.zi-h0{height:0 !important;}
...
.zi-h400{height:4rem !important;}.zi-h500{height:5rem !important;}
.z-h5p{height:5%;}.z-h8p{height:8%;}
.z-h10p{height:10%;}.z-h12p{height:12%;}
.z-h15p{height:15%;}.z-h20p{height:20%;}
.z-h30p{height:30%;}.z-h40p{height:40%;}
.z-h50p{height:50%;}.z-h60p{height:60%;}
.z-h70p{height:70%;}.z-h80p{height:80%;}
.z-h90p{height:90%;}.z-h100p{height:100%;}
.zi-h5p{height:5% !important;}.zi-h8p{height:8% !important;}
...
.zi-h90p{height:90% !important;}.zi-h100p{height:100% !important;}
</span>
</div>
<#-- 行高 -->
<div class="tutorial title">行高</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
<ul>
<li>原 ZhiqimUI 中的定义具体数值的 z-lh*，如： z-lh15；统一改成用 z- 前缀，单位为 rem，如：z-lh15。</li>
<li>原 ZhiqimUI 中的定义百分比的 z-lh100p、zi-lh50p 保留。</li>
</ul>
<span class="z-text-prewrap z-pre">
.z-lh0{line-height:0;}.z-lh10{line-height:.1rem;}
.z-lh12{line-height:.12rem;}.z-lh14{line-height:.14rem;}
.z-lh15{line-height:.15rem;}.z-lh16{line-height:.16rem;}
.z-lh18{line-height:.18rem;}.z-lh20{line-height:.2rem;}
.z-lh22{line-height:.22rem;}.z-lh24{line-height:.24rem;}
.z-lh25{line-height:.25rem;}.z-lh28{line-height:.28rem;}
.z-lh30{line-height:.3rem;}.z-lh32{line-height:.32rem;}
.z-lh35{line-height:.35rem;}.z-lh40{line-height:.4rem;}
.z-lh45{line-height:.45rem;}.z-lh50{line-height:.5rem;}
.z-lh55{line-height:.55rem;}.z-lh60{line-height:.6rem;}
.z-lh70{line-height:.7rem;}.z-lh80{line-height:.8rem;}
.z-lh90{line-height:.9rem;}.z-lh100{line-height:1rem;}
.zi-lh0{line-height:0 !important;}.zi-lh10{line-height:.1rem !important;}
...
.zi-lh90{line-height:.9rem !important;}.zi-lh100{line-height:1rem !important;}
.z-lh100p{line-height:100%;}.z-lh110p{line-height:110%;}
.z-lh120p{line-height:120%;}.z-lh130p{line-height:130%;}
.z-lh140p{line-height:140%;}.z-lh150p{line-height:150%;}
.z-lh180p{line-height:180%;}.z-lh200p{line-height:200%;}
.z-lh250p{line-height:250%;}.z-lh300p{line-height:300%;}
.zi-lh100p{line-height:100% !important;}.zi-lh110p{line-height:110% !important;}
.zi-lh120p{line-height:120% !important;}.zi-lh130p{line-height:130% !important;}
.zi-lh140p{line-height:140% !important;}.zi-lh150p{line-height:150% !important;}
.zi-lh180p{line-height:180% !important;}.zi-lh200p{line-height:200% !important;}
.zi-lh250p{line-height:250% !important;}.zi-lh300p{line-height:300% !important;}
</span>
</div>
<#-- 内边距和外边距 -->
<div class="tutorial title">内边距和外边距</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
<ul>
<li>原 ZhiqimUI 中的定义具体数值的 z-pd*、z-pd-l*、z-mg*、z-mg-r* ，如： z-pd5、z-pd-l5、z-mg10、z-mg-t-10；统一改成用 z- 前缀，单位为 rem。</li>
<li>新增 z-pd-lr*、z-pd-tb*、z-mg-lr*、z-mg-tb* 表示左右、上下的边距统一设置。</li>
<li>针对 1px 边框，可能存在的 负偏移，新增 z-mg-t-1px 表示向上偏移 -1px；left、right、bottom方向同理。</li>
<li>外边距新增 auto属性。</li>
</ul>
<span class="z-text-prewrap z-pre">
.z-pd0{padding:0;}.z-pd1{padding:.01rem;}
.z-pd2{padding:.02rem;}.z-pd3{padding:.03rem;}
.z-pd4{padding:.04rem;}.z-pd5{padding:.05rem;}
.z-pd6{padding:.06rem;}.z-pd7{padding:.07rem;}
.z-pd8{padding:.08rem;}.z-pd9{padding:.09rem;}
.z-pd10{padding:.1rem;}.z-pd12{padding:.12rem;}
.z-pd14{padding:.14rem;}.z-pd15{padding:.15rem;}
.z-pd16{padding:.16rem;}.z-pd18{padding:.18rem;}
.z-pd20{padding:.2rem;}.z-pd24{padding:.24rem;}
.z-pd25{padding:.25rem;}.z-pd26{padding:.25rem;}
.z-pd28{padding:.28rem;}.z-pd30{padding:.3rem;}
.zi-pd0{padding:0 !important;}.zi-pd1{padding:.01rem !important;}
...
.zi-pd28{padding:.28rem !important;}.zi-pd30{padding:.3rem !important;}
.z-pd-l0{padding-left:0;}.z-pd-l1{padding-left:.01rem;}
.z-pd-l2{padding-left:.02rem;}.z-pd-l3{padding-left:.03rem;}
.z-pd-l4{padding-left:.04rem;}.z-pd-l5{padding-left:.05rem;}
.z-pd-l6{padding-left:.06rem;}.z-pd-l7{padding-left:.07rem;}
.z-pd-l8{padding-left:.08rem;}.z-pd-l9{padding-left:.09rem;}
.z-pd-l10{padding-left:.1rem;}.z-pd-l12{padding-left:.12rem;}
.z-pd-l14{padding-left:.14rem;}.z-pd-l15{padding-left:.15rem;}
.z-pd-l16{padding-left:.16rem;}.z-pd-l18{padding-left:.18rem;}
.z-pd-l20{padding-left:.2rem;}.z-pd-l24{padding-left:.24rem;}
.z-pd-l25{padding-left:.25rem;}.z-pd-l26{padding-left:.25rem;}
.z-pd-l28{padding-left:.28rem;}.z-pd-l30{padding-left:.3rem;}
.zi-pd-l0{padding-left:0 !important;}.zi-pd-l1{padding-left:.01rem !important;}
...
.zi-pd-l28{padding-left:.28rem !important;}.zi-pd-l30{padding-left:.3rem !important;}
...为省略篇幅，类似代码省略...
.z-pd-lr0{padding-left:0;padding-right:0;}.z-pd-lr1{padding-left:.01rem;padding-right:.01rem;}
.z-pd-lr2{padding-left:.02rem;padding-right:.02rem;}.z-pd-lr3{padding-left:.03rem;padding-right:.03rem;}
.z-pd-lr4{padding-left:.04rem;padding-right:.04rem;}.z-pd-lr5{padding-left:.05rem;padding-right:.05rem;}
.z-pd-lr6{padding-left:.06rem;padding-right:.06rem;}.z-pd-lr7{padding-left:.07rem;padding-right:.07rem;}
.z-pd-lr8{padding-left:.08rem;padding-right:.08rem;}.z-pd-lr9{padding-left:.09rem;padding-right:.09rem;}
.z-pd-lr10{padding-left:.1rem;padding-right:.1rem;}.z-pd-lr12{padding-left:.12rem;padding-right:.12rem;}
.z-pd-lr14{padding-left:.14rem;padding-right:.14rem;}.z-pd-lr15{padding-left:.15rem;padding-right:.15rem;}
.z-pd-lr16{padding-left:.16rem;padding-right:.16rem;}.z-pd-lr18{padding-left:.18rem;padding-right:.18rem;}
.z-pd-lr20{padding-left:.2rem;padding-right:.2rem;}.z-pd-lr24{padding-left:.24rem;padding-right:.24rem;}
.z-pd-lr25{padding-left:.25rem;padding-right:.25rem;}.z-pd-lr26{padding-left:.25rem;padding-right:.25rem;}
.z-pd-lr28{padding-left:.28rem;padding-right:.28rem;}.z-pd-lr30{padding-left:.3rem;padding-right:.3rem;}
.zi-pd-lr0{padding-left:0 !important;padding-right:0 !important;}.zi-pd-lr1{padding-left:.01rem !important;padding-right:.01rem !important;}
...
.zi-pd-lr28{padding-left:.28rem !important;padding-right:.28rem !important;}.zi-pd-lr30{padding-left:.3rem !important;padding-right:.3rem !important;}
...为省略篇幅，类似代码省略...
.z-mg-0{margin:0;}.z-mg1{margin:.01rem;}
.z-mg2{margin:.02rem;}.z-mg3{margin:.03rem;}
.z-mg4{margin:.04rem;}.z-mg5{margin:.05rem;}
.z-mg6{margin:.06rem;}.z-mg7{margin:.07rem;}
.z-mg8{margin:.08rem;}.z-mg9{margin:.09rem;}
.z-mg10{margin:.1rem;}.z-mg12{margin:.12rem;}
.z-mg14{margin:.14rem;}.z-mg15{margin:.15rem;}
.z-mg16{margin:.16rem;}.z-mg18{margin:.18rem;}
.z-mg20{margin:.2rem;}.z-mg24{margin:.24rem;}
.z-mg25{margin:.25rem;}.z-mg26{margin:.25rem;}
.z-mg28{margin:.28rem;}.z-mg30{margin:.3rem;}
.zi-mg0{margin:0 !important;}.zi-mg1{margin:.01rem !important;}
...
.zi-mg28{margin:.28rem !important;}.zi-mg30{margin:.3rem !important;}
.z-mg-t0{margin-top:0;}.z-mg-t1{margin-top:.01rem;}
.z-mg-t2{margin-top:.02rem;}.z-mg-t3{margin-top:.03rem;}
.z-mg-t4{margin-top:.04rem;}.z-mg-t5{margin-top:.05rem;}
.z-mg-t6{margin-top:.06rem;}.z-mg-t7{margin-top:.07rem;}
.z-mg-t8{margin-top:.08rem;}.z-mg-t9{margin-top:.09rem;}
.z-mg-t10{margin-top:.1rem;}.z-mg-t12{margin-top:.12rem;}
.z-mg-t14{margin-top:.14rem;}.z-mg-t15{margin-top:.15rem;}
.z-mg-t16{margin-top:.16rem;}.z-mg-t18{margin-top:.18rem;}
.z-mg-t20{margin-top:.2rem;}.z-mg-t24{margin-top:.24rem;}
.z-mg-t25{margin-top:.25rem;}.z-mg-t26{margin-top:.25rem;}
.z-mg-t28{margin-top:.28rem;}.z-mg-t30{margin-top:.3rem;}
.zi-mg-t0{margin-top:0 !important;}.zi-mg-t1{margin-top:.01rem !important;}
...
.zi-mg-t28{margin-top:.28rem !important;}.zi-mg-t30{margin-top:.3rem !important;}
...为省略篇幅，类似代码省略...
.z-mg-t-1{margin-top:-.01rem;}.z-mg-t-2{margin-top:-.02rem;}
.z-mg-t-3{margin-top:-.03rem;}.z-mg-t-4{margin-top:-.04rem;}
.z-mg-t-5{margin-top:-.05rem;}.z-mg-t-6{margin-top:-.06rem;}
.z-mg-t-7{margin-top:-.07rem;}.z-mg-t-8{margin-top:-.08rem;}
.z-mg-t-9{margin-top:-.09rem;}.z-mg-t-10{margin-top:-.1rem;}
.z-mg-t-12{margin-top:-.12rem;}.z-mg-t-14{margin-top:-.14rem;}
.z-mg-t-15{margin-top:-.15rem;}.z-mg-t-16{margin-top:-.16rem;}
.z-mg-t-18{margin-top:-.18rem;}.z-mg-t-20{margin-top:-.2rem;}
.z-mg-t-24{margin-top:-.24rem;}.z-mg-t-25{margin-top:-.25rem;}
.z-mg-t-26{margin-top:-.25rem;}.z-mg-t-28{margin-top:-.28rem;}
.z-mg-t-30{margin-top:-.3rem;}
.zi-mg-t-1{margin-top:-.01rem !important;}.zi-mg-t-2{margin-top:-.02rem !important;}
...
.zi-mg-t-30{margin-top:-.3rem !important;}
...为省略篇幅，类似代码省略...
.z-mg-t-1px{margin-top:-1px;}
.z-mg-r-1px{margin-right:-1px;}
.z-mg-l-1px{margin-left:-1px;}
.z-mg-b-1px{margin-bottom:-1px;}
.zi-mg-t-1px{margin-top:-1px !important;}
.zi-mg-r-1px{margin-right:-1px !important;}
.zi-mg-l-1px{margin-left:-1px !important;}
.zi-mg-b-1px{margin-bottom:-1px !important;}
.z-mg-auto{margin:auto;}
.z-mg-l-auto{margin-left:auto;}
.z-mg-r-auto{margin-right:auto;}
.z-mg-t-auto{margin-top:auto;}
.z-mg-b-auto{margin-bottom:auto;}
.z-mg-lr-auto{margin-left:auto;margin-right:auto;}
.z-mg-tb-auto{margin-top:auto;margin-bottom:auto;}
.zi-mg-auto{margin:auto !important;}
.zi-mg-l-auto{margin-left:auto !important;}
.zi-mg-r-auto{margin-right:auto !important;}
.zi-mg-t-auto{margin-top:auto !important;}
.zi-mg-b-auto{margin-bottom:auto !important;}
.zi-mg-lr-auto{margin-left:auto !important;margin-right:auto !important;}
.zi-mg-tb-auto{margin-top:auto !important;margin-bottom:auto !important;}
</span>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}
zhiqim_ui/document/tutorial/uim/css/text.htm
+460
View File
@@ -0,0 +1,460 @@
<#def title = "文本样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
<#def prevUrl = "font.htm"/>
<#def nextUrl = "block.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}
${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_container_ui("ZmUI", "css", "text")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "文本样式")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">文本样式：</p>
<p class="z-color-333" style="text-indent:38px;">
文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
</p>
</div>
<#-- 一、粗斜体上下标和删除线下划线文本 -->
<div class="tutorial title">一、粗斜体、上下标、删除线、下划线、标记字体、缩写效果等标签样式和定义样式</div>
<table class="z-table z-bordered z-pd10 z-px16">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">b</td>
<td><pre class="z-text-preline">b{font-weight:bold;}</pre></td>
<td><b>微软雅黑字体</b></td>
<td>粗体</td>
</tr>
<tr>
<td class="z-samp">i</td>
<td><pre class="z-text-preline">i{font-style:italic;}</pre></td>
<td><i>微软雅黑字体</i></td>
<td>斜体</td>
</tr>
<tr>
<td class="z-samp">u</td>
<td><pre class="z-text-preline">u{text-decoration:underline;}</pre></td>
<td><u>带下划线文本效果</u></td>
<td>下划线体</td>
</tr>
<tr>
<td class="z-samp">del</td>
<td><pre class="z-text-preline">del{text-decoration:line-through;}</pre></td>
<td><del>带删除线文本效果</del></td>
<td>删除线体</td>
</tr>
<tr>
<td class="z-samp">small</td>
<td><pre class="z-text-preline">small{font-size:80%;}</pre></td>
<td><small>这里是小号文本效果</small></td>
<td>小号体，80%</td>
</tr>
<tr>
<td class="z-samp">sup</td>
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sup{top:-0.5em;}</pre></td>
<td>文本上标效果<sup>superscript</sup></td>
<td>上标</td>
</tr>
<tr>
<td class="z-samp">sub</td>
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sub{bottom:-0.25em;}</pre></td>
<td>文本下标效果<sub>subscript</sub></td>
<td>下标</td>
</tr>
<tr>
<td class="z-samp">mark</td>
<td><pre class="z-text-preline">mark{background:#ff0;color:#000;}</td>
<td>这里是<mark>标记字体效果<mark></td>
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
<td class="z-samp">abbr[title]</td>
<td><pre class="z-text-preline">abbr[title]{border-bottom:1px dotted;}<br>@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}</pre></td>
<td>这里是<abbr title="微软雅黑字体">MSYH</abbr>缩写效果</td>
<td>缩写体，显示下划虚线，firefox原来就有，所以要用hack去掉</td>
</tr>
<tr>
<td class="z-samp">.z-bold</td>
<td><pre class="z-text-preline">.z-bold{font-weight:bold;}</pre></td>
<td><span class="z-bold">这里是字体加粗效果</span></td>
<td>粗体</td>
</tr>
<tr>
<td class="z-samp">.z-italic</td>
<td><pre class="z-text-preline">.z-italic{font-style:italic;}</pre></td>
<td><span class="z-italic">这里是文本斜体效果</span></td>
<td>斜体</td>
</tr>
<tr>
<td class="z-samp">.z-underline</td>
<td><pre class="z-text-preline">.z-underline{text-decoration:underline;}</pre></td>
<td><span class="z-underline">带下划线文本效果</span></td>
<td>下划线体</td>
</tr>
<tr>
<td class="z-samp">.z-delline</td>
<td><pre class="z-text-preline">.z-delline{text-decoration:line-through;}</pre></td>
<td><span class="z-delline">带删除线文本效果</span></td>
<td>删除线体</td>
</tr>
<tr>
<td class="z-samp">.z-weight-normal</td>
<td><pre class="z-text-preline">.z-weight-normal{font-weight:normal;}</pre></td>
<td><span class="z-bold">粗体<span class="z-weight-normal">正常</span></span></td>
<td>普通大小</td>
</tr>
<tr>
<td class="z-samp">.z-style-normal</td>
<td><pre class="z-text-preline">.z-style-normal{font-style:normal;}</pre></td>
<td><span class="z-italic">斜体<span class="z-style-normal">正常</span></span></td>
<td>普通样式</td>
</tr>
<tr>
<td class="z-samp">.z-small</td>
<td><pre class="z-text-preline">.z-small{font-size:80%;}</pre></td>
<td><span class="z-small">这里是小号文本效果</span></td>
<td>小号体，80%</td>
</tr>
<tr>
<td class="z-samp">.z-sup</td>
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}</pre></td>
<td>文本上标效果<span class="z-sup">superscript</span></td>
<td>上标</td>
</tr>
<tr>
<td class="z-samp">.z-sub</td>
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}</pre></td>
<td>文本下标效果<span class="z-sub">subscript</span></td>
<td>下标</td>
</tr>
<tr>
<td class="z-samp">.z-mark</td>
<td><pre class="z-text-preline">.z-mark{background:#ff0;color:#000;}</pre></td>
<td>这里是<span class="z-mark">标记字体效果<mark></td>
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
<td class="z-samp">.z-abbr[title]</td>
<td><pre class="z-text-preline">.z-abbr[title]{border-bottom:1px dotted;}</pre></td>
<td>这里是<span class="z-abbr" title="微软雅黑字体">MSYH</span>缩写效果</td>
<td>缩写体，显示下划虚线</td>
</tr>
</table>
<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
<div class="tutorial title">二、文本换行、不换行、省略和隐藏等属性</div>
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-text-break</td>
<td><pre class="z-text-preline">.z-text-break{word-break:break-all; word-wrap:break-word;}</pre></td>
<td class="z-text-break">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>国人是不管英文是不是单词的，直接换行</td>
</tr>
<tr>
<td class="z-samp">.z-text-pre</td>
<td><pre class="z-text-preline">.z-text-pre{white-space:pre;}</td>
<td>
<span class="z-pre z-text-pre">
第一行第一行第一行第一行第一行
第二行
第三行
</span>
</td>
<td>保留空白符列表，类似于&lt;pre&gt;，每行nowrap，撑大</td>
</tr>
<tr>
<td class="z-samp">.z-text-prewrap</td>
<td><pre class="z-text-preline">.z-text-prewrap{white-space:pre-wrap;}</td>
<td>
<span class="z-pre z-text-prewrap">
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
第二行<br>
第三行<br>
</span>
</td>
<td>保留空白符列表，超时自动换行。</td>
</tr>
<tr>
<td class="z-samp">.z-text-preline</td>
<td><pre class="z-text-preline">.z-text-preline{white-space:pre-line;}</td>
<td>
<span class="z-pre z-text-preline">
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
第二行<br>
第三行<br>
</span>
</td>
<td>合并空白符列表，但是保留换行符。如果第一个字符是\n，&lt;pre&gt;会清理，.z-text-preline不会，需借助JS删除该字符，:first-line设置行高为0时IE/Webkit可以,Firefox不行</td>
</tr>
<tr>
<td class="z-samp">.z-text-nowrap</td>
<td><pre class="z-text-preline">.z-text-nowrap{white-space:nowrap;}</td>
<td class="z-text-nowrap">Except as required by law or in writing, the so</td>
<td>不换行，会把td撑大，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
<td class="z-samp">.z-text-ellipsis</td>
<td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
<td><span class="z-bd z-w300 z-text-ellipsis">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>超过的显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
<tr>
<td class="z-samp">
.z-text-ellipsis<br>
.z-text-ellipsis-line<br>
.z-text-ellipsis-2line<br>
.z-text-ellipsis-3line<br>
</td>
<td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word;-webkit-line-clamp:1;}</pre></td>
<td><span class="z-bd z-w300 z-text-ellipsis-2line">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>
超过的显示省略号，为展示效果，最好依需要显示的行数指定行高、高度<br>
因PC端兼容性较差，仅在 ZmUI 中定义
</td>
</tr>
<tr>
<td class="z-samp">.z-text-clip</td>
<td><pre class="z-text-preline">.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
<td><span class="z-bd z-w300 z-text-clip">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>超过的省略也不显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
</table>
<#-- 三、正文文本对齐方式 -->
<div class="tutorial title">三、正文文本对齐方式，其中z-为常用，zi-为优先</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-text-left</td>
<td><pre class="z-text-preline">.z-text-left{text-align:left;}</pre></td>
<td class="z-text-left">文本左对齐<br>文本左对齐</td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.z-text-center</td>
<td><pre class="z-text-preline">.z-text-center{text-align:center;}</pre></td>
<td class="z-text-center">文本居中对齐<br>文本居中对齐</td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.z-text-right</td>
<td><pre class="z-text-preline">.z-text-right{text-align:right;}</pre></td>
<td class="z-text-right">文本右对齐<br>文本右对齐</td>
<td>右对齐</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">以下为文本对齐优先</td>
</tr>
<tr>
<td class="z-samp">.zi-text-left</td>
<td><pre class="z-text-preline">.zi-text-left{text-align:left !important;}</pre></td>
<td class="zi-text-left">文本左对齐<br>文本左对齐</td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.zi-text-center</td>
<td><pre class="z-text-preline">.zi-text-center{text-align:center !important;}</pre></td>
<td class="zi-text-center">文本居中对齐<br>文本居中对齐</td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.zi-text-right</td>
<td><pre class="z-text-preline">.zi-text-right{text-align:right !important;}</pre></td>
<td class="zi-text-right">文本右对齐<br>文本右对齐</td>
<td>右对齐</td>
</tr>
</table>
<#-- ；四、标题样式（h1-h3） -->
<div class="tutorial title">四、标题样式（h1-h3）</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">h1</td>
<td><pre class="z-text-preline">h1{font-size:2em;margin:.67em 0;}</pre></td>
<td><h1>微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</h1></td>
<td>H1字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">h2</td>
<td><pre class="z-text-preline">h2{font-size:1.5em;margin:.83em 0;}</pre></td>
<td><h2>微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</h2></td>
<td>H2字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">h3</td>
<td><pre class="z-text-preline">h3{font-size:1.17em;margin:1em 0;}</pre></td>
<td><h3>微软雅黑字体，20号字体<br>微软雅黑字体，22号字体</h3></td>
<td>H3字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">.z-h1</td>
<td><pre class="z-text-preline">.z-h1{font-size:0.32rem;line-height:normal;font-weight:bold;display:block;margin:0.2rem 0;}</pre></td>
<td><span class="z-h1">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
<td>模拟H1，当H1被覆盖时可以使用z-h1</td>
</tr>
<tr>
<td class="z-samp">.z-h2</td>
<td><pre class="z-text-preline">.z-h2{font-size:0.24rem;line-height:normal;font-weight:bold;display:block;margin:0.19rem 0;}</pre></td>
<td><span class="z-h2">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
<td>模拟H2，当H2被覆盖时可以使用z-h2</td>
</tr>
<tr>
<td class="z-samp">.z-h3</td>
<td><pre class="z-text-preline">.z-h3{font-size:0.18rem;line-height:normal;font-weight:bold;display:block;margin:0.18rem 0;}</pre></td>
<td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
<td>模拟H3，当H3被覆盖时可以使用z-h3</td>
</tr>
</table>
<#-- 五、文本编码样式 -->
<div class="tutorial title">五、文本编码样式（编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑"）</div>
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">samp<br>.z-samp</td>
<td>
<pre class="z-text-preline">
samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
</pre>
</td>
<td>
<samp>samp{font-family:"Courier New"}</samp><br><br>
<span class="z-samp">.z-samp{border-radius:4px;}</span>
</td>
<td>无背景编码字体</td>
</tr>
<tr>
<td class="z-samp">kbd<br>.z-kbd</td>
<td>
<pre class="z-text-preline">
kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>kbd,.z-kbd{border-radius:4px;}</code>
kbd,.z-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);}
</pre>
</td>
<td>
<kbd>kbd{font-family:"Courier New"}</kbd><br><br>
<span class="z-kbd">.z-kbd{border-radius:4px;}</span>
</td>
<td>黑背景白字键盘输入字体</td>
</tr>
<tr>
<td class="z-samp">pre<br>.z-pre</td>
<td>
<pre class="z-text-preline">
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>pre{border-radius:4px;}</code>
pre{overflow:auto;display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #cccccc;}
pre code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
</pre>
</td>
<td>
<pre class="z-text-preline">
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
</pre>
<span class="z-pre z-text-preline"><code>.z-pre{border-radius:4px;}</code></span>
</td>
<td>预处理标记，默认是单行撑大、留白，这里增加了.z-text-preline，改为单行换行，留白合并<br><br>显示红色的为里面使用&lt;code&gt;封装</td>
</tr>
<tr>
<td class="z-samp">code<br>.z-code</td>
<td>
<pre class="z-text-preline">
code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>code,.z-code{border-radius:4px;}</code>
code,.z-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;}
pre code,.z-pre .z-code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
</pre>
</td>
<td>
<code class="z-text-preline">code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</code><br><br>
<span class="z-code z-text-preline">.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</span><br><br>
<span class="z-pre z-text-preline"><span class="z-code">code{border-radius:4px;}</span></span>
</td>
<td>编码标记，默认是自动换行，且不保留空白<br><br>外边框是在显示红色的为使用&lt;pre&gt;内进行封装</td>
</tr>
</table>
</div>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}