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

<#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适用于&lt;span&gt;,&lt;a&gt;,&lt;label&gt;,&lt;input&gt;,&lt;img&gt;<br>
        2、z-show-b适用&lt;div&gt;,&lt;p&gt;,&lt;h1&gt;,&lt;form&gt;,&lt;ul&gt;&lt;li&gt;<br>
        3、z-show-ib适用于把块作为内联方式。
        </td>
</tr>
<tr>
    <td class="z-samp">.z-visible<br>.zi-visible</td>
    <td><pre class="z-text-preline">
        .z-visible{visibility:visible !important;}
        .zi-visible{visibility:visible !important;}
    </pre></td>
    <td>用于保留占位的显示</td>
</tr>
<tr>
    <td class="z-samp">.z-hidden<br>.zi-hidden<br></td>
    <td><pre class="z-text-preline">
        .z-hidden{visibility:hidden !important;}
        .zi-hidden{visibility:hidden !important;}
    </pre></td>
    <td>用于保留占位的隐藏</td>
</tr>
</table>

<#-- 七、块宽度 -->
<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()}