first commit
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,613 @@
|
||||
<#def title = "颜色定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。"/>
|
||||
<#def prevUrl = "css.htm"/>
|
||||
<#def nextUrl = "font.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "color")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "颜色定义")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">颜色定义：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/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">${textColor}</td>
|
||||
<td class="z-samp">${colorMap.get("textColor")}</td>
|
||||
<td>全局颜色</td>
|
||||
<td>全局颜色定义，定义在body中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局背景颜色</td>
|
||||
<td class="z-samp">${bgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("bgColor")}</td>
|
||||
<td>全局背景</td>
|
||||
<td>全局背景颜色，定义在body中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局链接颜色</td>
|
||||
<td class="z-samp">${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">${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">${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">${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">${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">${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">${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">${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">${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">${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">${btnBdColor}<br>${btnBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBdColor")}<br>${colorMap.get("btnBgColor")}</td>
|
||||
<td><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">${btnBgHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBgHoverColor")}</td>
|
||||
<td><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">${btnBgActiveColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBgActiveColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${redHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${orangeHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${yellowHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${greenHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${cyanHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${blueHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueHoverColor")}</td>
|
||||
<td><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">${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">${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">${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">${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">${purpleHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleHoverColor")}</td>
|
||||
<td><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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,250 @@
|
||||
<#def title = "全局定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
|
||||
<#def prevUrl = "../index.htm"/>
|
||||
<#def nextUrl = "color.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "global")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "全局定义")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">全局定义：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<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;}
|
||||
|
||||
只支持一个根元素如(<svg></svg>)，除了<svg>内部的，其他的都不显示
|
||||
</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">
|
||||
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||||
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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);/*iOS高亮色不透明*/
|
||||
height:100%;
|
||||
}
|
||||
|
||||
1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
|
||||
2、指定文档隐藏X轴滚动条，Y轴滚动条自动
|
||||
3、当屏幕横坚切换时字体大小调整和以前一样
|
||||
4、iOS下链接点中是修改为黑色
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,917 @@
|
||||
<#def title = "字体图标"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "“字体图标”是矢量图片按字体规范设计的一种新的图标，知启蒙字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分"/>
|
||||
<#def prevUrl = "color.htm"/>
|
||||
<#def nextUrl = "ico.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "font")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "字体图标")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">什么是“字体图标”？</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
“字体图标”是矢量图片按字体规范设计的一种新的图标，知启蒙字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分
|
||||
操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
|
||||
字体图标不支持斜体，以便使用<i>标签来定义，如<i class="z-font z-config"></i>
|
||||
</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">&#xf000;</td>
|
||||
<td width="7%"><i class="z-font z-config"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td width="8%"><i class="z-font z-config z-text-orange zi-px18"></i> <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">&#xf001;</td>
|
||||
<td><i class="z-font z-add"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-add z-text-orange zi-px18"></i> <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">&#xf002;</td>
|
||||
<td><i class="z-font z-modify"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-modify z-text-orange zi-px18"></i> <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">&#xf003;</td>
|
||||
<td><i class="z-font z-delete"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-delete z-text-orange zi-px18"></i> <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">&#xf004;</td>
|
||||
<td><i class="z-font z-query"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-query z-text-orange zi-px18"></i> <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">&#xf005;</td>
|
||||
<td><i class="z-font z-previous"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-previous z-text-orange zi-px18"></i> <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">&#xf006;</td>
|
||||
<td><i class="z-font z-next"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-next z-text-orange zi-px18"></i> <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">&#xf007;</td>
|
||||
<td><i class="z-font z-open"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-open z-text-orange zi-px18"></i> <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">&#xf008;</td>
|
||||
<td><i class="z-font z-close"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-close z-text-orange zi-px18"></i> <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">&#xf009;</td>
|
||||
<td><i class="z-font z-upload"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-upload z-text-orange zi-px18"></i> <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">&#xf00a;</td>
|
||||
<td><i class="z-font z-save"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-save z-text-orange zi-px18"></i> <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">&#xf00b;</td>
|
||||
<td><i class="z-font z-return"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-return z-text-orange zi-px18"></i> <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">&#xf00c;</td>
|
||||
<td><i class="z-font z-refresh"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-refresh z-text-orange zi-px18"></i> <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">&#xf00d;</td>
|
||||
<td><i class="z-font z-success"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-success z-text-orange zi-px18"></i> <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">&#xf00e;</td>
|
||||
<td><i class="z-font z-error"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-error z-text-orange zi-px18"></i> <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">&#xf00f;</td>
|
||||
<td><i class="z-font z-setting"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-setting z-text-orange zi-px18"></i> <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">&#xf010;</td>
|
||||
<td><i class="z-font z-share"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-share z-text-orange zi-px18"></i> <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">&#xf011;</td>
|
||||
<td><i class="z-font z-download"></i> 字体</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> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-download z-text-orange zi-px18"></i> <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">&#xf040;</td>
|
||||
<td width="7%"><i class="z-font z-folder"></i> 字体</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">&#xf041;</td>
|
||||
<td><i class="z-font z-collect"></i> 字体</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">&#xf042;</td>
|
||||
<td><i class="z-font z-briefcase"></i> 字体</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">&#xf043;</td>
|
||||
<td><i class="z-font z-image-text"></i> 字体</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">&#xf044;</td>
|
||||
<td><i class="z-font z-text"></i> 字体</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">&#xf045;</td>
|
||||
<td><i class="z-font z-picture"></i> 字体</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">&#xf046;</td>
|
||||
<td><i class="z-font z-video"></i> 字体</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">&#xf047;</td>
|
||||
<td><i class="z-font z-voice"></i> 字体</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">&#xf048;</td>
|
||||
<td><i class="z-font z-camera"></i> 字体</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">&#xf049;</td>
|
||||
<td><i class="z-font z-print"></i> 字体</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">&#xf060;</td>
|
||||
<td width="7%"><i class="z-font z-computer"></i> 字体</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">&#xf061;</td>
|
||||
<td><i class="z-font z-phone"></i> 字体</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">&#xf062;</td>
|
||||
<td><i class="z-font z-monitor"></i> 字体</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">&#xf063;</td>
|
||||
<td><i class="z-font z-email"></i> 字体</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">&#xf064;</td>
|
||||
<td><i class="z-font z-internet"></i> 字体</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">&#xf065;</td>
|
||||
<td><i class="z-font z-switch"></i> 字体</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">&#xf066;</td>
|
||||
<td><i class="z-font z-wifi"></i> 字体</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">&#xf067;</td>
|
||||
<td><i class="z-font z-cloud"></i> 字体</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">&#xf068;</td>
|
||||
<td><i class="z-font z-port"></i> 字体</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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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">&#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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,470 @@
|
||||
<#def title = "表格样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。"/>
|
||||
<#def prevUrl = "block.htm"/>
|
||||
<#def nextUrl = "../js/js.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<style>
|
||||
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
|
||||
</style>
|
||||
<script>
|
||||
function doSelectBorder(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-bordered");
|
||||
Z(table).removeClass("z-bordered-line");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
else
|
||||
{//删除可能的颜色
|
||||
Z(table).removeClass("z-red");
|
||||
Z(table).removeClass("z-orange");
|
||||
Z(table).removeClass("z-yellow");
|
||||
Z(table).removeClass("z-green");
|
||||
Z(table).removeClass("z-cyan");
|
||||
Z(table).removeClass("z-blue");
|
||||
Z(table).removeClass("z-purple");
|
||||
Z(table).removeClass("z-bd-rd5");
|
||||
Z(table).removeClass("z-bd-rd8");
|
||||
Z(table).removeClass("z-bd-rd10");
|
||||
}
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectRadius(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-bd-rd5");
|
||||
Z(table).removeClass("z-bd-rd8");
|
||||
Z(table).removeClass("z-bd-rd10");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectColor(elem, color)
|
||||
{
|
||||
Z(elem).parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-red");
|
||||
Z(table).removeClass("z-orange");
|
||||
Z(table).removeClass("z-yellow");
|
||||
Z(table).removeClass("z-green");
|
||||
Z(table).removeClass("z-cyan");
|
||||
Z(table).removeClass("z-blue");
|
||||
Z(table).removeClass("z-purple");
|
||||
|
||||
if (Z.Validates.isNotEmpty(color))
|
||||
Z(table).addClass(color);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectPadding(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-pd3");
|
||||
Z(table).removeClass("z-pd10");
|
||||
Z(table).removeClass("z-pd16");
|
||||
Z(table).removeClass("z-pd20");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectPx(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-px16");
|
||||
Z(table).removeClass("z-px14");
|
||||
Z(table).removeClass("z-px12");
|
||||
Z(table).removeClass("z-px18");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectAlign(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-text-left");
|
||||
Z(table).removeClass("z-text-center");
|
||||
Z(table).removeClass("z-text-right");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectLh(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-lh100p");
|
||||
Z(table).removeClass("z-lh150p");
|
||||
Z(table).removeClass("z-lh200p");
|
||||
Z(table).removeClass("z-lh30");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doRepairRadius(elem)
|
||||
{
|
||||
var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:last-child");
|
||||
var $first = $tr.find(" > td:first-child");
|
||||
var $last = $tr.find(" > td:last-child");
|
||||
|
||||
if (elem.checked)
|
||||
{
|
||||
$first.addClass("z-bd-rd-bl8");
|
||||
$last.addClass("z-bd-rd-br8");
|
||||
}
|
||||
else
|
||||
{
|
||||
$first.removeClass("z-bd-rd-bl8");
|
||||
$last.removeClass("z-bd-rd-br8");
|
||||
}
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent().parent());
|
||||
}
|
||||
|
||||
function doRepairLeftBorder(elem)
|
||||
{
|
||||
var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:first-child");
|
||||
var $first = $tr.next("tr>td:first-child");
|
||||
var $second = $tr.next("tr").next("tr>td:first-child");
|
||||
|
||||
if (elem.checked)
|
||||
{
|
||||
$first.addClass("zi-bd-l");
|
||||
$second.addClass("zi-bd-l");
|
||||
}
|
||||
else
|
||||
{
|
||||
$first.removeClass("zi-bd-l");
|
||||
$second.removeClass("zi-bd-l");
|
||||
}
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent().parent());
|
||||
}
|
||||
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "table")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "表格样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">表格样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。
|
||||
另外，CSS对底部圆角当有背景时需要手动对第一和最后单元格补圆角，当圆角首列合并单元格时也需要对被合并的行第一单元格补左边线。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
|
||||
|
||||
<#-- 一、表格边框 -->
|
||||
<div class="tutorial title">一、表格边框（默认灰色无圆角，单元格内边框10px）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">边框：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectBorder(this);">
|
||||
<option value="z-bordered">边框</option>
|
||||
<option value="z-bordered-line">边线</option>
|
||||
<option value="">无边框</option>
|
||||
</select>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8 z-mg-l-1" onchange="doSelectRadius(this);">
|
||||
<option value="">无圆角</option>
|
||||
<option value="z-bd-rd5">5像素</option>
|
||||
<option value="z-bd-rd8">8像素</option>
|
||||
<option value="z-bd-rd10">10像素</option>
|
||||
</select>
|
||||
<span class="z-px14">颜色：</span>
|
||||
<span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
|
||||
<span class="z-px14">内边距：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectPadding(this);">
|
||||
<option value="z-pd10">z-pd10</option>
|
||||
<option value="z-pd3">z-pd3</option>
|
||||
<option value="z-pd16">z-pd16</option>
|
||||
<option value="z-pd20">z-pd20</option>
|
||||
<option value="">无边距</option>
|
||||
</select>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="30%">&价格</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、表格单元格文本设置 -->
|
||||
<div class="tutorial title">二、表格单元格文本设置（默认左对齐、字体继承14px、行高继承120%）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">单元格对齐：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w100 z-h30 z-mg-t8" onchange="doSelectAlign(this);">
|
||||
<option value="">默认左对齐</option>
|
||||
<option value="z-text-left">左对齐</option>
|
||||
<option value="z-text-center">居中</option>
|
||||
<option value="z-text-right">右对齐</option>
|
||||
</select>
|
||||
<span class="z-px14">字体大小：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectPx(this);">
|
||||
<option value="">默认大小</option>
|
||||
<option value="z-px14">z-px14</option>
|
||||
<option value="z-px16">z-px16</option>
|
||||
<option value="z-px12">z-px12</option>
|
||||
<option value="z-px18">z-px18</option>
|
||||
</select>
|
||||
<span class="z-px14">字体行高：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectLh(this);">
|
||||
<option value="">默认大小</option>
|
||||
<option value="z-lh100p">z-lh100p</option>
|
||||
<option value="z-lh150p">z-lh150p</option>
|
||||
<option value="z-lh200p">z-lh200p</option>
|
||||
<option value="z-lh30">z-lh30</option>
|
||||
</select>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="30%">&价格</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看<br>修改<br>删除</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看<br>修改<br>删除</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">默认有边框表格，格式为[class="z-table z-bordered"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、单元格文本对齐三种左对齐[z-text-left]、居中[z-text-center]、右对齐[z-text-right]，未配置默认左对齐<br>
|
||||
5、单元格文本字体大小，如[z-px16]、[z-px18]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
|
||||
6、单元格文本行高，如百分比行高[z-lh150p]、[z-lh200p]和固定行高[z-lh30]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、表格圆角最后一行有背景补圆角 -->
|
||||
<div class="tutorial title">三、表格圆角边框最后一行有背景补圆角</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairRadius(this);">补底部圆角</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<table class="z-table z-bordered z-bd-rd8 z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">序号</td>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3" class="z-bd-rd-bl8 z-bd-rd-br8">脚注</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">圆角边框时，最后一行有背景时，需要对当前行第一列和最后一列增加[class="z-bd-rd-bl8"]和[class="z-bd-rd-br8"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
|
||||
5、[z-bd-rd-bl8 z-bd-rd-br8]表示脚注最后一行，也增加下左和下右8像素圆角，这样就不会被背景遮住圆角
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、表格圆角边框第一列有向下合并单元格时被合并行首列补左边线 -->
|
||||
<div class="tutorial title">四、表格圆角边框第一列有向下合并单元格时，被合并行剩余首列补左边线</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairLeftBorder(this);">补左边线</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<table class="z-table z-bordered z-bd-rd8 z-pd10">
|
||||
<tr>
|
||||
<td width="30%" rowspan="3">示例</td>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-bd-l">admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-bd-l">admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>脚注</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">圆角边框时，如果有第一列向下合并单元格的情况，被合并的行的第一列要求增加左边线，格式为[class="zi-bd-l"]，有颜色还要加上颜色[class="zi-bd-l z-red"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
|
||||
5、第二行和第三行的第一列被第一行第一列向下合并了，因此第二行和第三行剩余的第一列要求增加左边线，格式为[class="zi-bd-l"]
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,782 @@
|
||||
<#def title = "文本样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
|
||||
<#def prevUrl = "ico.htm"/>
|
||||
<#def nextUrl = "block.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "text")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "文本样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">文本样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
|
||||
</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-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>保留空白符列表，类似于<pre>，每行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，<pre>会清理，.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-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:24px;color:#333;line-height:150%;}</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:22px;color:#333;line-height:150%;}</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:20px;color:#333;line-height:150%;}</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:24px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</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:22px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</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:20px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</pre></td>
|
||||
<td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
<td>模拟H3，当H3被覆盖时可以使用z-h3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、正文文本字体大小（px10-px30） -->
|
||||
<div class="tutorial title">五、正文文本字体大小（px10-px30），其中z-为常用，zi-为优先</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px10</td>
|
||||
<td><pre class="z-text-preline">.z-px10{font-size:10px;}</pre></td>
|
||||
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px11</td>
|
||||
<td><pre class="z-text-preline">.z-px11{font-size:11px;}</pre></td>
|
||||
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px12</td>
|
||||
<td><pre class="z-text-preline">.z-px12{font-size:12px;}</pre></td>
|
||||
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px13</td>
|
||||
<td><pre class="z-text-preline">.z-px13{font-size:13px;}</pre></td>
|
||||
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px14</td>
|
||||
<td><pre class="z-text-preline">.z-px14{font-size:14px;}</pre></td>
|
||||
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px15</td>
|
||||
<td><pre class="z-text-preline">.z-px15{font-size:15px;}</pre></td>
|
||||
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px16</td>
|
||||
<td><pre class="z-text-preline">.z-px16{font-size:16px;}</pre></td>
|
||||
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px17</td>
|
||||
<td><pre class="z-text-preline">.z-px17{font-size:17px;}</pre></td>
|
||||
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px18</td>
|
||||
<td><pre class="z-text-preline">.z-px18{font-size:18px;}</pre></td>
|
||||
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px19</td>
|
||||
<td><pre class="z-text-preline">.z-px19{font-size:19px;}</pre></td>
|
||||
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px20</td>
|
||||
<td><pre class="z-text-preline">.z-px20{font-size:20px;}</pre></td>
|
||||
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px22</td>
|
||||
<td><pre class="z-text-preline">.z-px22{font-size:22px;}</pre></td>
|
||||
<td><span class="z-px22 z-lh120p">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px24</td>
|
||||
<td><pre class="z-text-preline">.z-px24{font-size:24px;}</pre></td>
|
||||
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px26</td>
|
||||
<td><pre class="z-text-preline">.z-px26{font-size:26px;}</pre></td>
|
||||
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px30</td>
|
||||
<td><pre class="z-text-preline">.z-px30{font-size:30px;}</pre></td>
|
||||
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="zi-text-cyan">以下为文本优先zi-px10 - zi-px30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px10</td>
|
||||
<td><pre class="z-text-preline">.zi-px10{font-size:10px !important;}</pre></td>
|
||||
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px11</td>
|
||||
<td><pre class="z-text-preline">.zi-px11{font-size:11px !important;}</pre></td>
|
||||
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px12</td>
|
||||
<td><pre class="z-text-preline">.zi-px12{font-size:12px !important;}</pre></td>
|
||||
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px13</td>
|
||||
<td><pre class="z-text-preline">.zi-px13{font-size:13px !important;}</pre></td>
|
||||
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px14</td>
|
||||
<td><pre class="z-text-preline">.zi-px14{font-size:14px !important;}</pre></td>
|
||||
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px15</td>
|
||||
<td><pre class="z-text-preline">.zi-px15{font-size:15px !important;}</pre></td>
|
||||
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px16</td>
|
||||
<td><pre class="z-text-preline">.zi-px16{font-size:16px !important;}</pre></td>
|
||||
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px17</td>
|
||||
<td><pre class="z-text-preline">.zi-px17{font-size:17px !important;}</pre></td>
|
||||
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px18</td>
|
||||
<td><pre class="z-text-preline">.zi-px18{font-size:18px !important;}</pre></td>
|
||||
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px19</td>
|
||||
<td><pre class="z-text-preline">.zi-px19{font-size:19px !important;}</pre></td>
|
||||
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px20</td>
|
||||
<td><pre class="z-text-preline">.zi-px20{font-size:20px !important;}</pre></td>
|
||||
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px22</td>
|
||||
<td><pre class="z-text-preline">.zi-px22{font-size:22px !important;}</pre></td>
|
||||
<td><span class="z-px22">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px24</td>
|
||||
<td><pre class="z-text-preline">.zi-px24{font-size:24px !important;}</pre></td>
|
||||
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px26</td>
|
||||
<td><pre class="z-text-preline">.zi-px26{font-size:26px !important;}</pre></td>
|
||||
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px30</td>
|
||||
<td><pre class="z-text-preline">.zi-px30{font-size:30px !important;}</pre></td>
|
||||
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></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="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="zi-text-cyan">行高定义lh10-lh40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh10<br>.zi-lh10</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh10{height:10px;}
|
||||
.zi-lh10{height:10px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh10">行高<br>行高</div></td>
|
||||
<td>行高10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh12<br>.zi-lh12</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh12{height:12px;}
|
||||
.zi-lh12{height:12px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh12">行高<br>行高</div></td>
|
||||
<td>行高12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh14<br>.zi-lh14</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh14{height:14px;}
|
||||
.zi-lh14{height:14px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh14">行高<br>行高</div></td>
|
||||
<td>行高14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh15<br>.zi-lh15</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh15{height:15px;}
|
||||
.zi-lh15{height:15px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh15">行高<br>行高</div></td>
|
||||
<td>行高15px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh16<br>.zi-lh16</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh16{height:16px;}
|
||||
.zi-lh16{height:16px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh16">行高<br>行高</div></td>
|
||||
<td>行高16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh18<br>.zi-lh18</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh18{height:18px;}
|
||||
.zi-lh18{height:18px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh18">行高<br>行高</div></td>
|
||||
<td>行高18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh20<br>.zi-lh20</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh20{height:20px;}
|
||||
.zi-lh20{height:20px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh20">行高<br>行高</div></td>
|
||||
<td>行高20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh22<br>.zi-lh22</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh22{height:22px;}
|
||||
.zi-lh22{height:22px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh22">行高<br>行高</div></td>
|
||||
<td>行高22px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh25<br>.zi-lh25</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh25{height:25px;}
|
||||
.zi-lh25{height:25px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh25">行高<br>行高</div></td>
|
||||
<td>行高25px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh28<br>.zi-lh28</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh28{height:28px;}
|
||||
.zi-lh28{height:28px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh28">行高<br>行高</div></td>
|
||||
<td>行高28px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh30<br>.zi-lh30</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh30{height:30px;}
|
||||
.zi-lh30{height:30px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh30">行高<br>行高</div></td>
|
||||
<td>行高30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh35<br>.zi-lh35</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh35{height:35px;}
|
||||
.zi-lh35{height:35px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh35">行高<br>行高</div></td>
|
||||
<td>行高35px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh40<br>.zi-lh40</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh40{height:40px;}
|
||||
.zi-lh40{height:40px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh40">行高<br>行高</div></td>
|
||||
<td>行高40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="zi-text-cyan">行高百分比</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh100p<br>.zi-lh100p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh100p{line-height:100%;}
|
||||
.zi-lh100p{line-height:100% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh100p">行高<br>行高</div></td>
|
||||
<td>行高100%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh110p<br>.zi-lh110p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh110p{line-height:110%;}
|
||||
.zi-lh110p{line-height:110% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh110p">行高<br>行高</div></td>
|
||||
<td>行高110%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh120p<br>.zi-lh120p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh120p{line-height:120%;}
|
||||
.zi-lh120p{line-height:120% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh120p">行高<br>行高</div></td>
|
||||
<td>行高120%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh130p<br>.zi-lh130p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh130p{line-height:130%;}
|
||||
.zi-lh130p{line-height:130% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh130p">行高<br>行高</div></td>
|
||||
<td>行高130%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh140p<br>.zi-lh140p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh140p{line-height:140%;}
|
||||
.zi-lh140p{line-height:140% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh140p">行高<br>行高</div></td>
|
||||
<td>行高140%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh150p<br>.zi-lh150p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh150p{line-height:150%;}
|
||||
.zi-lh150p{line-height:150% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh150p">行高<br>行高</div></td>
|
||||
<td>行高150%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh180p<br>.zi-lh180p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh180p{line-height:180%;}
|
||||
.zi-lh180p{line-height:180% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh180p">行高<br>行高</div></td>
|
||||
<td>行高180%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh200p<br>.zi-lh200p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh200p{line-height:200%;}
|
||||
.zi-lh200p{line-height:200% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh200p">行高<br>行高</div></td>
|
||||
<td>行高200%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh250p<br>.zi-lh250p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh250p{line-height:250%;}
|
||||
.zi-lh250p{line-height:250% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh250p">行高<br>行高</div></td>
|
||||
<td>行高250%</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>显示红色的为里面使用<code>封装</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>外边框是在显示红色的为使用<pre>内进行封装</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user