Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
block.htm47KB
<#def title = "块样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/>
<#def prevUrl = "text.htm"/>
<#def nextUrl = "table.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "css", "block")}
<!--主体-->
<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-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-fixed<br>
.zi-fixed
</td>
<td><pre class="z-text-preline">
.z-fixed{position:fixed;}
.zi-fixed{position:fixed !important;}
</pre></td>
<td>固定定位</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute<br>
.zi-absolute</td>
<td><pre class="z-text-preline">
.z-absolute{position:absolute;}
.zi-absolute{position:absolute !important;}
</pre></td>
<td>绝对定位</td>
</tr>
<tr>
<td class="z-samp">
.z-relative<br>
.zi-relative</td>
<td><pre class="z-text-preline">
.z-relative{position:relative;}
.zi-relative{position:relative !important;}
</pre></td>
<td>相对定位</td>
</tr>
</table>
<#-- 二、块浮动对齐 -->
<div class="tutorial title">二、块浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-float-left<br>.zi-float-left</td>
<td><pre class="z-text-preline">
.z-float-left{float:left;}
.zi-float-left{float:left !important;}
</pre></td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-center<br>.zi-float-center</td>
<td><pre class="z-text-preline">
.z-float-center{margin-left:auto;margin-right:auto;}
.zi-float-center{margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-right<br>.zi-float-right</td>
<td><pre class="z-text-preline">
.z-float-right{float:right;}
.zi-float-right{float:right !important;}
</pre></td>
<td>右对齐</td>
</tr>
</table>
<#-- 三、块定位+浮动对齐 -->
<div class="tutorial title">三、块定位+浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="23%">名称</td>
<td width="*">样式</td>
<td width="16%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-left<br>
.zi-relative-left</td>
<td><pre class="z-text-preline">
.z-relative-left{position:relative;float:left;}
.zi-relative-left{position:relative !important;float:left !important;}
</pre></td>
<td>相对左对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-center<br>
.zi-relative-center</td>
<td><pre class="z-text-preline">
.z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
.zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>相对居中</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-right<br>
.zi-relative-right</td>
<td><pre class="z-text-preline">
.z-relative-right{position:relative;float:right;}
.zi-relative-right{position:relative !important;float:right !important;}
</pre></td>
<td>相对右对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute-center-middle<br>
.zi-absolute-center-middle</td>
<td><pre class="z-text-preline">
.z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
.zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
</pre></td>
<td>绝对居中，内部块在父块的上下左右居中</td>
</tr>
</table>
<#-- 四、块溢出 -->
<div class="tutorial title">四、块溢出</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-auto</td>
<td><pre class="z-text-preline">
.z-overflow-auto{overflow:auto;}
</pre></td>
<td>块溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-hidden{overflow:hidden;}
</pre></td>
<td>块溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-scroll{overflow:scroll;}
</pre></td>
<td>块始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-auto</td>
<td><pre class="z-text-preline">
.z-overflow-x-auto{overflow-x:auto;}
</pre></td>
<td>块X轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-x-hidden{overflow-x:hidden;}
</pre></td>
<td>块X轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-x-scroll{overflow-x:scroll;}
</pre></td>
<td>块X轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-auto</td>
<td><pre class="z-text-preline">
.z-overflow-y-auto{overflow-y:auto;}
</pre></td>
<td>块Y轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-y-hidden{overflow-y:hidden;}
</pre></td>
<td>块Y轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-y-scroll{overflow-y:scroll;}
</pre></td>
<td>块Y轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
</table>
<#-- 五、块手势 -->
<div class="tutorial title">五、块鼠标标志</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-pointer</td>
<td><pre class="z-text-preline">
.z-pointer{cursor:pointer;}
</pre></td>
<td>显示手标志，即可点击状态</td>
</tr>
<tr>
<td class="z-samp">.z-forbidden</td>
<td><pre class="z-text-preline">
.z-forbidden{cursor:not-allowed;}
</pre></td>
<td>禁止使用，显示禁止标志</td>
</tr>
</table>
<#-- 六、块隐藏和显示 -->
<div class="tutorial title">六、块隐藏和显示</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">举例</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-hide<br>.zi-hide</td>
<td><pre class="z-text-preline">
.z-hide{display:none;}
.zi-hide{display:none !important;}
</pre>
</td>
<td>隐藏，不占位</td>
</tr>
<tr>
<td class="z-samp">
.z-show<br>.z-show-b<br>.z-show-ib<br>
.zi-show<br>.zi-show-b<br>.zi-show-ib
</td>
<td><pre class="z-text-preline">
.z-show{display:inline;}
.z-show-b{display:block;}
.z-show-ib{display:inline-block;}
.zi-show{display:inline !important;}
.zi-show-b{display:block !important;}
.zi-show-ib{display:inline-block !important;}
</pre></td>
<td class="z-samp">
显示的三种状态<br>
1、z-show适用于<span>,<a>,<label>,<input>,<img><br>
2、z-show-b适用<div>,<p>,<h1>,<form>,<ul><li><br>
3、z-show-ib适用于把块作为内联方式。
</td>
</tr>
<tr>
<td class="z-samp">.z-visible<br>.zi-visible</td>
<td><pre class="z-text-preline">
.z-visible{visibility:visible !important;}
.zi-visible{visibility:visible !important;}
</pre></td>
<td>用于保留占位的显示</td>
</tr>
<tr>
<td class="z-samp">.z-hidden<br>.zi-hidden<br></td>
<td><pre class="z-text-preline">
.z-hidden{visibility:hidden !important;}
.zi-hidden{visibility:hidden !important;}
</pre></td>
<td>用于保留占位的隐藏</td>
</tr>
</table>
<#-- 七、块宽度 -->
<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">宽度（w20-w1200）</td>
</tr>
<tr>
<td class="z-samp">.z-w20<br>.zi-w20</td>
<td><pre class="z-text-preline">
.z-w20{width:20px;}
.zi-w20{width:20px !important;}
</pre></td>
<td><div class="z-bd z-w20">宽度</div></td>
<td>宽度20px</td>
</tr>
<tr>
<td class="z-samp">.z-w30<br>.zi-w30</td>
<td><pre class="z-text-preline">
.z-w30{width:30px;}
.zi-w30{width:30px !important;}
</pre></td>
<td><div class="z-bd z-w30">宽度</div></td>
<td>宽度30px</td>
</tr>
<tr>
<td class="z-samp">.z-w40<br>.zi-w40</td>
<td><pre class="z-text-preline">
.z-w40{width:40px;}
.zi-w40{width:40px !important;}
</pre></td>
<td><div class="z-bd z-w40">宽度</div></td>
<td>宽度40px</td>
</tr>
<tr>
<td class="z-samp">.z-w50<br>.zi-w50</td>
<td><pre class="z-text-preline">
.z-w50{width:50px;}
.zi-w50{width:50px !important;}
</pre></td>
<td><div class="z-bd z-w50">宽度</div></td>
<td>宽度50px</td>
</tr>
<tr>
<td class="z-samp">.z-w60<br>.zi-w60</td>
<td><pre class="z-text-preline">
.z-w60{width:60px;}
.zi-w60{width:60px !important;}
</pre></td>
<td><div class="z-bd z-w60">宽度</div></td>
<td>宽度60px</td>
</tr>
<tr>
<td class="z-samp">.z-w70<br>.zi-w70</td>
<td><pre class="z-text-preline">
.z-w70{width:70px;}
.zi-w70{width:70px !important;}
</pre></td>
<td><div class="z-bd z-w70">宽度</div></td>
<td>宽度70px</td>
</tr>
<tr>
<td class="z-samp">.z-w80<br>.zi-w80</td>
<td><pre class="z-text-preline">
.z-w80{width:80px;}
.zi-w80{width:80px !important;}
</pre></td>
<td><div class="z-bd z-w80">宽度</div></td>
<td>宽度80px</td>
</tr>
<tr>
<td class="z-samp">.z-w90<br>.zi-w90</td>
<td><pre class="z-text-preline">
.z-w90{width:90px;}
.zi-w90{width:90px !important;}
</pre></td>
<td><div class="z-bd z-w90">宽度</div></td>
<td>宽度90px</td>
</tr>
<tr>
<td class="z-samp">.z-w100<br>.zi-w100</td>
<td><pre class="z-text-preline">
.z-w100{width:100px;}
.zi-w100{width:100px !important;}
</pre></td>
<td><div class="z-bd z-w100">宽度</div></td>
<td>宽度100px</td>
</tr>
<tr>
<td class="z-samp">.z-w110<br>.zi-w110</td>
<td><pre class="z-text-preline">
.z-w110{width:110px;}
.zi-w110{width:110px !important;}
</pre></td>
<td><div class="z-bd z-w110">宽度</div></td>
<td>宽度110px</td>
</tr>
<tr>
<td class="z-samp">.z-w120<br>.zi-w120</td>
<td><pre class="z-text-preline">
.z-w120{width:120px;}
.zi-w120{width:120px !important;}
</pre></td>
<td><div class="z-bd z-w120">宽度</div></td>
<td>宽度120px</td>
</tr>
<tr>
<td class="z-samp">.z-w130<br>.zi-w130</td>
<td><pre class="z-text-preline">
.z-w130{width:130px;}
.zi-w130{width:130px !important;}
</pre></td>
<td><div class="z-bd z-w130">宽度</div></td>
<td>宽度130px</td>
</tr>
<tr>
<td class="z-samp">.z-w140<br>.zi-w140</td>
<td><pre class="z-text-preline">
.z-w140{width:140px;}
.zi-w140{width:140px !important;}
</pre></td>
<td><div class="z-bd z-w140">宽度</div></td>
<td>宽度140px</td>
</tr>
<tr>
<td class="z-samp">.z-w150<br>.zi-w150</td>
<td><pre class="z-text-preline">
.z-w150{width:150px;}
.zi-w150{width:150px !important;}
</pre></td>
<td><div class="z-bd z-w150">宽度</div></td>
<td>宽度150px</td>
</tr>
<tr>
<td class="z-samp">
.z-w200<br>.zi-w200<br>
.z-w300<br>.zi-w300<br>
.z-w400<br>.zi-w400<br>
.z-w500<br>.zi-w500<br>
.z-w600<br>.zi-w600<br>
.z-w700<br>.zi-w700<br>
.z-w800<br>.zi-w800<br>
.z-w900<br>.zi-w900<br>
.z-w1000<br>.zi-w1000<br>
.z-w1200<br>.zi-w1200<br>
</td>
<td><pre class="z-text-preline">
.z-w200{width:200px;}
.z-w300{width:300px;}
.z-w400{width:400px;}
.z-w500{width:500px;}
.z-w600{width:600px;}
.z-w700{width:700px;}
.z-w800{width:800px;}
.z-w900{width:900px;}
.z-w1000{width:1000px;}
.z-w1200{width:1200px;}
.zi-w200{width:200px !important;}
.zi-w300{width:300px !important;}
.zi-w400{width:400px !important;}
.zi-w500{width:500px !important;}
.zi-w600{width:600px !important;}
.zi-w700{width:700px !important;}
.zi-w800{width:800px !important;}
.zi-w900{width:900px !important;}
.zi-w1000{width:1000px !important;}
.zi-w1200{width:1200px !important;}
</pre></td>
<td><div class="z-bd z-w200">宽度</div></td>
<td>宽度200px</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">宽度百分比</td>
</tr>
<tr>
<td class="z-samp">.z-w5p<br>.zi-w5p</td>
<td><pre class="z-text-preline">
.z-w5p{width:5%;}
.zi-w5p{width:5% !important;}
</pre></td>
<td><div class="z-bd z-w5p">宽度</div></td>
<td>宽度5%</td>
</tr>
<tr>
<td class="z-samp">.z-w8p<br>.zi-w8p</td>
<td><pre class="z-text-preline">
.z-w8p{width:8%;}
.zi-w8p{width:8% !important;}
</pre></td>
<td><div class="z-bd z-w8p">宽度</div></td>
<td>宽度8%</td>
</tr>
<tr>
<td class="z-samp">.z-w10p<br>.zi-w10p</td>
<td><pre class="z-text-preline">
.z-w10p{width:10%;}
.zi-w10p{width:10% !important;}
</pre></td>
<td><div class="z-bd z-w10p">宽度</div></td>
<td>宽度10%</td>
</tr>
<tr>
<td class="z-samp">.z-w12p<br>.zi-w12p</td>
<td><pre class="z-text-preline">
.z-w12p{width:12%;}
.zi-w12p{width:12% !important;}
</pre></td>
<td><div class="z-bd z-w12p">宽度</div></td>
<td>宽度12%</td>
</tr>
<tr>
<td class="z-samp">.z-w15p<br>.zi-w15p</td>
<td><pre class="z-text-preline">
.z-w15p{width:15%;}
.zi-w15p{width:15% !important;}
</pre></td>
<td><div class="z-bd z-w15p">宽度</div></td>
<td>宽度15%</td>
</tr>
<tr>
<td class="z-samp">.z-w20p<br>.zi-w20p</td>
<td><pre class="z-text-preline">
.z-w20p{width:20%;}
.zi-w20p{width:20% !important;}
</pre></td>
<td><div class="z-bd z-w20p">宽度</div></td>
<td>宽度20%</td>
</tr>
<tr>
<td class="z-samp">.z-w30p<br>.zi-w30p</td>
<td><pre class="z-text-preline">
.z-w30p{width:30%;}
.zi-w30p{width:30% !important;}
</pre></td>
<td><div class="z-bd z-w30p">宽度</div></td>
<td>宽度30%</td>
</tr>
<tr>
<td class="z-samp">.z-w40p<br>.zi-w40p</td>
<td><pre class="z-text-preline">
.z-w40p{width:40%;}
.zi-w40p{width:40% !important;}
</pre></td>
<td><div class="z-bd z-w40p">宽度</div></td>
<td>宽度40%</td>
</tr>
<tr>
<td class="z-samp">.z-w50p<br>.zi-w50p</td>
<td><pre class="z-text-preline">
.z-w50p{width:50%;}
.zi-w50p{width:50% !important;}
</pre></td>
<td><div class="z-bd z-w50p">宽度</div></td>
<td>宽度50%</td>
</tr>
<tr>
<td class="z-samp">.z-w60p<br>.zi-w60p</td>
<td><pre class="z-text-preline">
.z-w60p{width:60%;}
.zi-w60p{width:60% !important;}
</pre></td>
<td><div class="z-bd z-w60p">宽度</div></td>
<td>宽度60%</td>
</tr>
<tr>
<td class="z-samp">.z-w70p<br>.zi-w70p</td>
<td><pre class="z-text-preline">
.z-w70p{width:70%;}
.zi-w70p{width:70% !important;}
</pre></td>
<td><div class="z-bd z-w70p">宽度</div></td>
<td>宽度70%</td>
</tr>
<tr>
<td class="z-samp">.z-w80p<br>.zi-w80p</td>
<td><pre class="z-text-preline">
.z-w80p{width:80%;}
.zi-w80p{width:80% !important;}
</pre></td>
<td><div class="z-bd z-w80p">宽度</div></td>
<td>宽度80%</td>
</tr>
<tr>
<td class="z-samp">.z-w90p<br>.zi-w90p</td>
<td><pre class="z-text-preline">
.z-w90p{width:90%;}
.zi-w90p{width:90% !important;}
</pre></td>
<td><div class="z-bd z-w90p">宽度</div></td>
<td>宽度90%</td>
</tr>
<tr>
<td class="z-samp">.z-w100p<br>.zi-w100p</td>
<td><pre class="z-text-preline">
.z-w100p{width:100%;}
.zi-w100p{width:100% !important;}
</pre></td>
<td><div class="z-bd z-w100p">宽度</div></td>
<td>宽度100%</td>
</tr>
<tr>
<td class="z-samp">.z-w100p2<br>.zi-w100p2</td>
<td><pre class="z-text-preline">
.z-w100p2{width:50%;}
.zi-w100p2{width:50% !important;}
</pre></td>
<td><div class="z-bd z-w100p2">宽度</div></td>
<td>宽度二分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p3<br>.zi-w100p3</td>
<td><pre class="z-text-preline">
.z-w100p3{width:33.333333%;}
.zi-w100p3{width:33.333333% !important;}
</pre></td>
<td><div class="z-bd z-w100p3">宽度</div></td>
<td>宽度三分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p4<br>.zi-w100p4</td>
<td><pre class="z-text-preline">
.z-w100p4{width:25%;}
.zi-w100p4{width:25% !important;}
</pre></td>
<td><div class="z-bd z-w100p4">宽度</div></td>
<td>宽度四分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p5<br>.zi-w100p5</td>
<td><pre class="z-text-preline">
.z-w100p5{width:20%;}
.zi-w100p5{width:20% !important;}
</pre></td>
<td><div class="z-bd z-w100p5">宽度</div></td>
<td>宽度五分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p6<br>.zi-w100p6</td>
<td><pre class="z-text-preline">
.z-w100p6{width:16.666666%;}
.zi-w100p6{width:16.666666% !important;}
</pre></td>
<td><div class="z-bd z-w100p6">宽度</div></td>
<td>宽度六分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p7<br>.zi-w100p7</td>
<td><pre class="z-text-preline">
.z-w100p7{width:14.285714%;}
.zi-w100p7{width:14.285714% !important;}
</pre></td>
<td><div class="z-bd z-w100p7">宽度</div></td>
<td>宽度七分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p8<br>.zi-w100p8</td>
<td><pre class="z-text-preline">
.z-w100p8{width:12.5%;}
.zi-w100p8{width:12.5% !important;}
</pre></td>
<td><div class="z-bd z-w100p8">宽度</div></td>
<td>宽度八分之一</td>
</tr>
<tr>
<td class="z-samp">.z-w100p9<br>.zi-w100p9</td>
<td><pre class="z-text-preline">
.z-w100p9{width:11.111111%;}
.zi-w100p9{width:11.111111% !important;}
</pre></td>
<td><div class="z-bd z-w100p9">宽度</div></td>
<td>宽度九分之一</td>
</tr>
</table>
<#-- 八、块高度定义 -->
<div class="tutorial title">八、块高度定义（像素高度 & 百分比高度）</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">高度定义h20-h1200</td>
</tr>
<tr>
<td class="z-samp">.z-h20<br>.zi-h20</td>
<td><pre class="z-text-preline">
.z-h20{height:20px;}
.zi-h20{height:20px !important;}
</pre></td>
<td><div class="z-bd z-h20">高度</div></td>
<td>高度20px</td>
</tr>
<tr>
<td class="z-samp">.z-h30<br>.zi-h30</td>
<td><pre class="z-text-preline">
.z-h30{height:30px;}
.zi-h30{height:30px !important;}
</pre></td>
<td><div class="z-bd z-h30">高度</div></td>
<td>高度30px</td>
</tr>
<tr>
<td class="z-samp">.z-h40<br>.zi-h40</td>
<td><pre class="z-text-preline">
.z-h40{height:40px;}
.zi-h40{height:40px !important;}
</pre></td>
<td><div class="z-bd z-h40">高度</div></td>
<td>高度40px</td>
</tr>
<tr>
<td class="z-samp">.z-h50<br>.zi-h50</td>
<td><pre class="z-text-preline">
.z-h50{height:50px;}
.zi-h50{height:50px !important;}
</pre></td>
<td><div class="z-bd z-h50">高度</div></td>
<td>高度50px</td>
</tr>
<tr>
<td class="z-samp">.z-h60<br>.zi-h60</td>
<td><pre class="z-text-preline">
.z-h60{height:60px;}
.zi-h60{height:60px !important;}
</pre></td>
<td><div class="z-bd z-h60">高度</div></td>
<td>高度60px</td>
</tr>
<tr>
<td class="z-samp">.z-h70<br>.zi-h70</td>
<td><pre class="z-text-preline">
.z-h70{height:70px;}
.zi-h70{height:70px !important;}
</pre></td>
<td><div class="z-bd z-h70">高度</div></td>
<td>高度70px</td>
</tr>
<tr>
<td class="z-samp">.z-h80<br>.zi-h80</td>
<td><pre class="z-text-preline">
.z-h80{height:80px;}
.zi-h80{height:80px !important;}
</pre></td>
<td><div class="z-bd z-h80">高度</div></td>
<td>高度80px</td>
</tr>
<tr>
<td class="z-samp">.z-h90<br>.zi-h90</td>
<td><pre class="z-text-preline">
.z-h90{height:90px;}
.zi-h90{height:90px !important;}
</pre></td>
<td><div class="z-bd z-h90">高度</div></td>
<td>高度90px</td>
</tr>
<tr>
<td class="z-samp">.z-h100<br>.zi-h100</td>
<td><pre class="z-text-preline">
.z-h100{height:100px;}
.zi-h100{height:100px !important;}
</pre></td>
<td><div class="z-bd z-h100">高度</div></td>
<td>高度100px</td>
</tr>
<tr>
<td class="z-samp">.z-h110<br>.zi-h110</td>
<td><pre class="z-text-preline">
.z-h110{height:110px;}
.zi-h110{height:110px !important;}
</pre></td>
<td><div class="z-bd z-h110">高度</div></td>
<td>高度110px</td>
</tr>
<tr>
<td class="z-samp">.z-h120<br>.zi-h120</td>
<td><pre class="z-text-preline">
.z-h120{height:120px;}
.zi-h120{height:120px !important;}
</pre></td>
<td><div class="z-bd z-h120">高度</div></td>
<td>高度120px</td>
</tr>
<tr>
<td class="z-samp">.z-h130<br>.zi-h130</td>
<td><pre class="z-text-preline">
.z-h130{height:130px;}
.zi-h130{height:130px !important;}
</pre></td>
<td><div class="z-bd z-h130">高度</div></td>
<td>高度130px</td>
</tr>
<tr>
<td class="z-samp">.z-h140<br>.zi-h140</td>
<td><pre class="z-text-preline">
.z-h140{height:140px;}
.zi-h140{height:140px !important;}
</pre></td>
<td><div class="z-bd z-h140">高度</div></td>
<td>高度140px</td>
</tr>
<tr>
<td class="z-samp">.z-h150<br>.zi-h150</td>
<td><pre class="z-text-preline">
.z-h150{height:150px;}
.zi-h150{height:150px !important;}
</pre></td>
<td><div class="z-bd z-h150">高度</div></td>
<td>高度150px</td>
</tr>
<tr>
<td class="z-samp">
.z-h200<br>.zi-h200<br>
.z-h300<br>.zi-h300<br>
.z-h400<br>.zi-h400<br>
.z-h500<br>.zi-h500<br>
.z-h600<br>.zi-h600<br>
.z-h700<br>.zi-h700<br>
.z-h800<br>.zi-h800<br>
.z-h900<br>.zi-h900<br>
.z-h1000<br>.zi-h1000<br>
.z-h1200<br>.zi-h1200<br>
</td>
<td><pre class="z-text-preline">
.z-h200{height:200px;}
.z-h300{height:300px;}
.z-h400{height:400px;}
.z-h500{height:500px;}
.z-h600{height:600px;}
.z-h700{height:700px;}
.z-h800{height:800px;}
.z-h900{height:900px;}
.z-h1000{height:1000px;}
.z-h1200{height:1200px;}
.zi-h200{height:200px !important;}
.zi-h300{height:300px !important;}
.zi-h400{height:400px !important;}
.zi-h500{height:500px !important;}
.zi-h600{height:600px !important;}
.zi-h700{height:700px !important;}
.zi-h800{height:800px !important;}
.zi-h900{height:900px !important;}
.zi-h1000{height:1000px !important;}
.zi-h1200{height:1200px !important;}
</pre></td>
<td><div class="z-bd z-h200">高度</div></td>
<td>高度200px</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">高度百分比</td>
</tr>
<tr>
<td class="z-samp">.z-h5p<br>.zi-h5p</td>
<td><pre class="z-text-preline">
.z-h5p{height:5%;}
.zi-h5p{height:5% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h5p">高度</div></td>
<td>高度5%</td>
</tr>
<tr>
<td class="z-samp">.z-h8p<br>.zi-h8p</td>
<td><pre class="z-text-preline">
.z-h8p{height:8%;}
.zi-h8p{height:8% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h8p">高度</div></td>
<td>高度8%</td>
</tr>
<tr>
<td class="z-samp">.z-h10p<br>.zi-h10p</td>
<td><pre class="z-text-preline">
.z-h10p{height:10%;}
.zi-h10p{height:10% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h10p">高度</div></td>
<td>高度10%</td>
</tr>
<tr>
<td class="z-samp">.z-h12p<br>.zi-h12p</td>
<td><pre class="z-text-preline">
.z-h12p{height:12%;}
.zi-h12p{height:12% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h12p">高度</div></td>
<td>高度12%</td>
</tr>
<tr>
<td class="z-samp">.z-h15p<br>.zi-h15p</td>
<td><pre class="z-text-preline">
.z-h15p{height:15%;}
.zi-h15p{height:15% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h15p">高度</div></td>
<td>高度15%</td>
</tr>
<tr>
<td class="z-samp">.z-h20p<br>.zi-h20p</td>
<td><pre class="z-text-preline">
.z-h20p{height:20%;}
.zi-h20p{height:20% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h20p">高度</div></td>
<td>高度20%</td>
</tr>
<tr>
<td class="z-samp">.z-h30p<br>.zi-h30p</td>
<td><pre class="z-text-preline">
.z-h30p{height:30%;}
.zi-h30p{height:30% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h30p">高度</div></td>
<td>高度30%</td>
</tr>
<tr>
<td class="z-samp">.z-h40p<br>.zi-h40p</td>
<td><pre class="z-text-preline">
.z-h40p{height:40%;}
.zi-h40p{height:40% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h40p">高度</div></td>
<td>高度40%</td>
</tr>
<tr>
<td class="z-samp">.z-h50p<br>.zi-h50p</td>
<td><pre class="z-text-preline">
.z-h50p{height:50%;}
.zi-h50p{height:50% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h50p">高度</div></td>
<td>高度50%</td>
</tr>
<tr>
<td class="z-samp">.z-h60p<br>.zi-h60p</td>
<td><pre class="z-text-preline">
.z-h60p{height:60%;}
.zi-h60p{height:60% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h60p">高度</div></td>
<td>高度60%</td>
</tr>
<tr>
<td class="z-samp">.z-h70p<br>.zi-h70p</td>
<td><pre class="z-text-preline">
.z-h70p{height:70%;}
.zi-h70p{height:70% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h70p">高度</div></td>
<td>高度70%</td>
</tr>
<tr>
<td class="z-samp">.z-h80p<br>.zi-h80p</td>
<td><pre class="z-text-preline">
.z-h80p{height:80%;}
.zi-h80p{height:80% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h80p">高度</div></td>
<td>高度80%</td>
</tr>
<tr>
<td class="z-samp">.z-h90p<br>.zi-h90p</td>
<td><pre class="z-text-preline">
.z-h90p{height:90%;}
.zi-h90p{height:90% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h90p">高度</div></td>
<td>高度90%</td>
</tr>
<tr>
<td class="z-samp">.z-h100p<br>.zi-h100p</td>
<td><pre class="z-text-preline">
.z-h100p{height:100%;}
.zi-h100p{height:100% !important;}
</pre></td>
<td height="100"><div class="z-bd z-h100p">高度</div></td>
<td>高度100%</td>
</tr>
</table>
<#-- 九、块内边距定义 -->
<div class="tutorial title">九、块内边距定义（pd0-pd20），由于定义靠前，后续定义会覆盖，如果.z-pd{x}无效时请使用.zi-pd{x}</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 class="z-samp">.z-pd0系列</td>
<td><pre class="z-text-preline">
.z-pd0{padding:0;}
.z-pd-l0{padding-left:0;}
.z-pd-r0{padding-right:0;}
.z-pd-t0{padding-top:0;}
.z-pd-b0{padding-bottom:0;}
.zi-pd0{padding:0 !important;}
.zi-pd-l0{padding-left:0 !important;}
.zi-pd-r0{padding-right:0 !important;}
.zi-pd-t0{padding-top:0 !important;}
.zi-pd-b0{padding-bottom:0 !important;}
</pre></td>
<td><div class="z-bd z-pd0">内边距</div></td>
<td>内边距为0</td>
</tr>
<tr>
<td class="z-samp">.z-pd3系列</td>
<td><pre class="z-text-preline">
.z-pd3{padding:3px;}
.z-pd-l3{padding-left:3px;}
.z-pd-r3{padding-right:3px;}
.z-pd-t3{padding-top:3px;}
.z-pd-b3{padding-bottom:3px;}
.zi-pd3{padding:3px !important;}
.zi-pd-l3{padding-left:3px !important;}
.zi-pd-r3{padding-right:3px !important;}
.zi-pd-t3{padding-top:3px !important;}
.zi-pd-b3{padding-bottom:3px !important;}
</pre></td>
<td><div class="z-bd z-pd3">内边距</div></td>
<td>内边距为3</td>
</tr>
<tr>
<td class="z-samp">.z-pd4系列</td>
<td><pre class="z-text-preline">
.z-pd4{padding:4px;}
.z-pd-l4{padding-left:4px;}
.z-pd-r4{padding-right:4px;}
.z-pd-t4{padding-top:4px;}
.z-pd-b4{padding-bottom:4px;}
.zi-pd4{padding:4px !important;}
.zi-pd-l4{padding-left:4px !important;}
.zi-pd-r4{padding-right:4px !important;}
.zi-pd-t4{padding-top:4px !important;}
.zi-pd-b4{padding-bottom:4px !important;}
</pre></td>
<td><div class="z-bd z-pd4">内边距</div></td>
<td>内边距为4</td>
</tr>
<tr>
<td class="z-samp">.z-pd5系列</td>
<td><pre class="z-text-preline">
.z-pd5{padding:5px;}
.z-pd-l5{padding-left:5px;}
.z-pd-r5{padding-right:5px;}
.z-pd-t5{padding-top:5px;}
.z-pd-b5{padding-bottom:5px;}
.zi-pd5{padding:5px !important;}
.zi-pd-l5{padding-left:5px !important;}
.zi-pd-r5{padding-right:5px !important;}
.zi-pd-t5{padding-top:5px !important;}
.zi-pd-b5{padding-bottom:5px !important;}
</pre></td>
<td><div class="z-bd z-pd5">内边距</div></td>
<td>内边距为5</td>
</tr>
<tr>
<td class="z-samp">.z-pd6系列</td>
<td><pre class="z-text-preline">
.z-pd6{padding:6px;}
.z-pd-l6{padding-left:6px;}
.z-pd-r6{padding-right:6px;}
.z-pd-t6{padding-top:6px;}
.z-pd-b6{padding-bottom:6px;}
.zi-pd6{padding:6px !important;}
.zi-pd-l6{padding-left:6px !important;}
.zi-pd-r6{padding-right:6px !important;}
.zi-pd-t6{padding-top:6px !important;}
.zi-pd-b6{padding-bottom:6px !important;}
</pre></td>
<td><div class="z-bd z-pd6">内边距</div></td>
<td>内边距为6</td>
</tr>
<tr>
<td class="z-samp">.z-pd8系列</td>
<td><pre class="z-text-preline">
.z-pd8{padding:8px;}
.z-pd-l8{padding-left:8px;}
.z-pd-r8{padding-right:8px;}
.z-pd-t8{padding-top:8px;}
.z-pd-b8{padding-bottom:8px;}
.zi-pd8{padding:8px !important;}
.zi-pd-l8{padding-left:8px !important;}
.zi-pd-r8{padding-right:8px !important;}
.zi-pd-t8{padding-top:8px !important;}
.zi-pd-b8{padding-bottom:8px !important;}
</pre></td>
<td><div class="z-bd z-pd8">内边距</div></td>
<td>内边距为8</td>
</tr>
<tr>
<td class="z-samp">.z-pd10系列</td>
<td><pre class="z-text-preline">
.z-pd10{padding:10px;}
.z-pd-l10{padding-left:10px;}
.z-pd-r10{padding-right:10px;}
.z-pd-t10{padding-top:10px;}
.z-pd-b10{padding-bottom:10px;}
.zi-pd10{padding:10px !important;}
.zi-pd-l10{padding-left:10px !important;}
.zi-pd-r10{padding-right:10px !important;}
.zi-pd-t10{padding-top:10px !important;}
.zi-pd-b10{padding-bottom:10px !important;}
</pre></td>
<td><div class="z-bd z-pd10">内边距</div></td>
<td>内边距为10</td>
</tr>
<tr>
<td class="z-samp">.z-pd12系列</td>
<td><pre class="z-text-preline">
.z-pd12{padding:12px;}
.z-pd-l12{padding-left:12px;}
.z-pd-r12{padding-right:12px;}
.z-pd-t12{padding-top:12px;}
.z-pd-b12{padding-bottom:12px;}
.zi-pd12{padding:12px !important;}
.zi-pd-l12{padding-left:12px !important;}
.zi-pd-r12{padding-right:12px !important;}
.zi-pd-t12{padding-top:12px !important;}
.zi-pd-b12{padding-bottom:12px !important;}
</pre></td>
<td><div class="z-bd z-pd12">内边距</div></td>
<td>内边距为12</td>
</tr>
<tr>
<td class="z-samp">.z-pd14系列</td>
<td><pre class="z-text-preline">
.z-pd14{padding:14px;}
.z-pd-l14{padding-left:14px;}
.z-pd-r14{padding-right:14px;}
.z-pd-t14{padding-top:14px;}
.z-pd-b14{padding-bottom:14px;}
.zi-pd14{padding:14px !important;}
.zi-pd-l14{padding-left:14px !important;}
.zi-pd-r14{padding-right:14px !important;}
.zi-pd-t14{padding-top:14px !important;}
.zi-pd-b14{padding-bottom:14px !important;}
</pre></td>
<td><div class="z-bd z-pd14">内边距</div></td>
<td>内边距为14</td>
</tr>
<tr>
<td class="z-samp">.z-pd15系列</td>
<td><pre class="z-text-preline">
.z-pd15{padding:15px;}
.z-pd-l15{padding-left:15px;}
.z-pd-r15{padding-right:15px;}
.z-pd-t15{padding-top:15px;}
.z-pd-b15{padding-bottom:15px;}
.zi-pd15{padding:15px !important;}
.zi-pd-l15{padding-left:15px !important;}
.zi-pd-r15{padding-right:15px !important;}
.zi-pd-t15{padding-top:15px !important;}
.zi-pd-b15{padding-bottom:15px !important;}
</pre></td>
<td><div class="z-bd z-pd15">内边距</div></td>
<td>内边距为15</td>
</tr>
<tr>
<td class="z-samp">.z-pd16系列</td>
<td><pre class="z-text-preline">
.z-pd16{padding:16px;}
.z-pd-l16{padding-left:16px;}
.z-pd-r16{padding-right:16px;}
.z-pd-t16{padding-top:16px;}
.z-pd-b16{padding-bottom:16px;}
.zi-pd16{padding:16px !important;}
.zi-pd-l16{padding-left:16px !important;}
.zi-pd-r16{padding-right:16px !important;}
.zi-pd-t16{padding-top:16px !important;}
.zi-pd-b16{padding-bottom:16px !important;}
</pre></td>
<td><div class="z-bd z-pd16">内边距</div></td>
<td>内边距为16</td>
</tr>
<tr>
<td class="z-samp">.z-pd18系列</td>
<td><pre class="z-text-preline">
.z-pd18{padding:18px;}
.z-pd-l18{padding-left:18px;}
.z-pd-r18{padding-right:18px;}
.z-pd-t18{padding-top:18px;}
.z-pd-b18{padding-bottom:18px;}
.zi-pd18{padding:18px !important;}
.zi-pd-l18{padding-left:18px !important;}
.zi-pd-r18{padding-right:18px !important;}
.zi-pd-t18{padding-top:18px !important;}
.zi-pd-b18{padding-bottom:18px !important;}
</pre></td>
<td><div class="z-bd z-pd18">内边距</div></td>
<td>内边距为18</td>
</tr>
<tr>
<td class="z-samp">.z-pd20系列</td>
<td><pre class="z-text-preline">
.z-pd20{padding:20px;}
.z-pd-l20{padding-left:20px;}
.z-pd-r20{padding-right:20px;}
.z-pd-t20{padding-top:20px;}
.z-pd-b20{padding-bottom:20px;}
.zi-pd20{padding:20px !important;}
.zi-pd-l20{padding-left:20px !important;}
.zi-pd-r20{padding-right:20px !important;}
.zi-pd-t20{padding-top:20px !important;}
.zi-pd-b20{padding-bottom:20px !important;}
</pre></td>
<td><div class="z-bd z-pd20">内边距</div></td>
<td>内边距为20</td>
</tr>
</table>
<#-- 十、块外边距定义 -->
<div class="tutorial title">十、块外边距定义（mg0-mg20），由于定义靠前，后续定义会覆盖，如果.z-mg{x}无效时请使用.zi-mg{x}</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 class="z-samp">.z-mg0系列</td>
<td><pre class="z-text-preline">
.z-mg0{margin:0;}
.z-mg-l0{margin-left:0;}
.z-mg-r0{margin-right:0;}
.z-mg-t0{margin-top:0;}
.z-mg-b0{margin-bottom:0;}
.zi-mg0{margin:0 !important;}
.zi-mg-l0{margin-left:0 !important;}
.zi-mg-r0{margin-right:0 !important;}
.zi-mg-t0{margin-top:0 !important;}
.zi-mg-b0{margin-bottom:0 !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg0">外边距</div></div></td>
<td>外边距为0</td>
</tr>
<tr>
<td class="z-samp">.z-mg3系列</td>
<td><pre class="z-text-preline">
.z-mg3{margin:3px;}
.z-mg-l3{margin-left:3px;}
.z-mg-r3{margin-right:3px;}
.z-mg-t3{margin-top:3px;}
.z-mg-b3{margin-bottom:3px;}
.zi-mg3{margin:3px !important;}
.zi-mg-l3{margin-left:3px !important;}
.zi-mg-r3{margin-right:3px !important;}
.zi-mg-t3{margin-top:3px !important;}
.zi-mg-b3{margin-bottom:3px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg3">外边距</div></div></td>
<td>外边距为3</td>
</tr>
<tr>
<td class="z-samp">.z-mg4系列</td>
<td><pre class="z-text-preline">
.z-mg4{margin:4px;}
.z-mg-l4{margin-left:4px;}
.z-mg-r4{margin-right:4px;}
.z-mg-t4{margin-top:4px;}
.z-mg-b4{margin-bottom:4px;}
.zi-mg4{margin:4px !important;}
.zi-mg-l4{margin-left:4px !important;}
.zi-mg-r4{margin-right:4px !important;}
.zi-mg-t4{margin-top:4px !important;}
.zi-mg-b4{margin-bottom:4px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg4">外边距</div></div></td>
<td>外边距为4</td>
</tr>
<tr>
<td class="z-samp">.z-mg5系列</td>
<td><pre class="z-text-preline">
.z-mg5{margin:5px;}
.z-mg-l5{margin-left:5px;}
.z-mg-r5{margin-right:5px;}
.z-mg-t5{margin-top:5px;}
.z-mg-b5{margin-bottom:5px;}
.zi-mg5{margin:5px !important;}
.zi-mg-l5{margin-left:5px !important;}
.zi-mg-r5{margin-right:5px !important;}
.zi-mg-t5{margin-top:5px !important;}
.zi-mg-b5{margin-bottom:5px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg5">外边距</div></div></td>
<td>外边距为5</td>
</tr>
<tr>
<td class="z-samp">.z-mg6系列</td>
<td><pre class="z-text-preline">
.z-mg6{margin:6px;}
.z-mg-l6{margin-left:6px;}
.z-mg-r6{margin-right:6px;}
.z-mg-t6{margin-top:6px;}
.z-mg-b6{margin-bottom:6px;}
.zi-mg6{margin:6px !important;}
.zi-mg-l6{margin-left:6px !important;}
.zi-mg-r6{margin-right:6px !important;}
.zi-mg-t6{margin-top:6px !important;}
.zi-mg-b6{margin-bottom:6px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg6">外边距</div></div></td>
<td>外边距为6</td>
</tr>
<tr>
<td class="z-samp">.z-mg8系列</td>
<td><pre class="z-text-preline">
.z-mg8{margin:8px;}
.z-mg-l8{margin-left:8px;}
.z-mg-r8{margin-right:8px;}
.z-mg-t8{margin-top:8px;}
.z-mg-b8{margin-bottom:8px;}
.zi-mg8{margin:8px !important;}
.zi-mg-l8{margin-left:8px !important;}
.zi-mg-r8{margin-right:8px !important;}
.zi-mg-t8{margin-top:8px !important;}
.zi-mg-b8{margin-bottom:8px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg8">外边距</div></div></td>
<td>外边距为8</td>
</tr>
<tr>
<td class="z-samp">.z-mg10系列</td>
<td><pre class="z-text-preline">
.z-mg10{margin:10px;}
.z-mg-l10{margin-left:10px;}
.z-mg-r10{margin-right:10px;}
.z-mg-t10{margin-top:10px;}
.z-mg-b10{margin-bottom:10px;}
.zi-mg10{margin:10px !important;}
.zi-mg-l10{margin-left:10px !important;}
.zi-mg-r10{margin-right:10px !important;}
.zi-mg-t10{margin-top:10px !important;}
.zi-mg-b10{margin-bottom:10px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg10">外边距</div></div></td>
<td>外边距为10</td>
</tr>
<tr>
<td class="z-samp">.z-mg12系列</td>
<td><pre class="z-text-preline">
.z-mg12{margin:12px;}
.z-mg-l12{margin-left:12px;}
.z-mg-r12{margin-right:12px;}
.z-mg-t12{margin-top:12px;}
.z-mg-b12{margin-bottom:12px;}
.zi-mg12{margin:12px !important;}
.zi-mg-l12{margin-left:12px !important;}
.zi-mg-r12{margin-right:12px !important;}
.zi-mg-t12{margin-top:12px !important;}
.zi-mg-b12{margin-bottom:12px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg12">外边距</div></div></td>
<td>外边距为12</td>
</tr>
<tr>
<td class="z-samp">.z-mg14系列</td>
<td><pre class="z-text-preline">
.z-mg14{margin:14px;}
.z-mg-l14{margin-left:14px;}
.z-mg-r14{margin-right:14px;}
.z-mg-t14{margin-top:14px;}
.z-mg-b14{margin-bottom:14px;}
.zi-mg14{margin:14px !important;}
.zi-mg-l14{margin-left:14px !important;}
.zi-mg-r14{margin-right:14px !important;}
.zi-mg-t14{margin-top:14px !important;}
.zi-mg-b14{margin-bottom:14px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg14">外边距</div></div></td>
<td>外边距为14</td>
</tr>
<tr>
<td class="z-samp">.z-mg15系列</td>
<td><pre class="z-text-preline">
.z-mg15{margin:15px;}
.z-mg-l15{margin-left:15px;}
.z-mg-r15{margin-right:15px;}
.z-mg-t15{margin-top:15px;}
.z-mg-b15{margin-bottom:15px;}
.zi-mg15{margin:15px !important;}
.zi-mg-l15{margin-left:15px !important;}
.zi-mg-r15{margin-right:15px !important;}
.zi-mg-t15{margin-top:15px !important;}
.zi-mg-b15{margin-bottom:15px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg15">外边距</div></div></td>
<td>外边距为15</td>
</tr>
<tr>
<td class="z-samp">.z-mg16系列</td>
<td><pre class="z-text-preline">
.z-mg16{margin:16px;}
.z-mg-l16{margin-left:16px;}
.z-mg-r16{margin-right:16px;}
.z-mg-t16{margin-top:16px;}
.z-mg-b16{margin-bottom:16px;}
.zi-mg16{margin:16px !important;}
.zi-mg-l16{margin-left:16px !important;}
.zi-mg-r16{margin-right:16px !important;}
.zi-mg-t16{margin-top:16px !important;}
.zi-mg-b16{margin-bottom:16px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg16">外边距</div></div></td>
<td>外边距为16</td>
</tr>
<tr>
<td class="z-samp">.z-mg18系列</td>
<td><pre class="z-text-preline">
.z-mg18{margin:18px;}
.z-mg-l18{margin-left:18px;}
.z-mg-r18{margin-right:18px;}
.z-mg-t18{margin-top:18px;}
.z-mg-b18{margin-bottom:18px;}
.zi-mg18{margin:18px !important;}
.zi-mg-l18{margin-left:18px !important;}
.zi-mg-r18{margin-right:18px !important;}
.zi-mg-t18{margin-top:18px !important;}
.zi-mg-b18{margin-bottom:18px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg18">外边距</div></div></td>
<td>外边距为18</td>
</tr>
<tr>
<td class="z-samp">.z-mg20系列</td>
<td><pre class="z-text-preline">
.z-mg20{margin:20px;}
.z-mg-l20{margin-left:20px;}
.z-mg-r20{margin-right:20px;}
.z-mg-t20{margin-top:20px;}
.z-mg-b20{margin-bottom:20px;}
.zi-mg20{margin:20px !important;}
.zi-mg-l20{margin-left:20px !important;}
.zi-mg-r20{margin-right:20px !important;}
.zi-mg-t20{margin-top:20px !important;}
.zi-mg-b20{margin-bottom:20px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg20">外边距</div></div></td>
<td>外边距为20</td>
</tr>
<tr>
<td class="z-samp">.z-mg30系列</td>
<td><pre class="z-text-preline">
.z-mg30{margin:30px;}
.z-mg-l30{margin-left:30px;}
.z-mg-r30{margin-right:30px;}
.z-mg-t30{margin-top:30px;}
.z-mg-b30{margin-bottom:30px;}
.zi-mg30{margin:30px !important;}
.zi-mg-l30{margin-left:30px !important;}
.zi-mg-r30{margin-right:30px !important;}
.zi-mg-t30{margin-top:30px !important;}
.zi-mg-b30{margin-bottom:30px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg30">外边距</div></div></td>
<td>外边距为30</td>
</tr>
<tr>
<td class="z-samp">.z-mg40系列</td>
<td><pre class="z-text-preline">
.z-mg40{margin:40px;}
.z-mg-l40{margin-left:40px;}
.z-mg-r40{margin-right:40px;}
.z-mg-t40{margin-top:40px;}
.z-mg-b40{margin-bottom:40px;}
.zi-mg40{margin:40px !important;}
.zi-mg-l40{margin-left:40px !important;}
.zi-mg-r40{margin-right:40px !important;}
.zi-mg-t40{margin-top:40px !important;}
.zi-mg-b40{margin-bottom:40px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg40">外边距</div></div></td>
<td>外边距为40</td>
</tr>
<tr>
<td class="z-samp">.z-mg50系列</td>
<td><pre class="z-text-preline">
.z-mg50{margin:50px;}
.z-mg-l50{margin-left:50px;}
.z-mg-r50{margin-right:50px;}
.z-mg-t50{margin-top:50px;}
.z-mg-b50{margin-bottom:50px;}
.zi-mg50{margin:50px !important;}
.zi-mg-l50{margin-left:50px !important;}
.zi-mg-r50{margin-right:50px !important;}
.zi-mg-t50{margin-top:50px !important;}
.zi-mg-b50{margin-bottom:50px !important;}
</pre></td>
<td><div class="z-bd"><div class="z-bd z-mg50">外边距</div></div></td>
<td>外边距为50</td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}