Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
block.htm10KB
<#def title = "块样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/>
<#def prevUrl = "text.htm"/>
<#def nextUrl = "../js/js.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
${zhiqim_com_mobileUI_scrollJs()}
<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_ui("tutorial", "ui", "css", "block")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "块样式")}
<!-- content开始 -->
<div id="mobileUI_content" class="content">
<!-- 左侧详情 -->
<div class="mobileUI-left">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
<p class="z-text-blue">块样式：</p>
<p class="z-color-333" style="text-indent:38px;">
块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。
</p>
</div>
<#-- 一、块定位 -->
<div class="tutorial title">一、块定位</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-fixed<br>
.zi-fixed
</td>
<td><pre class="z-text-preline">
.z-fixed{position:fixed;}
.zi-fixed{position:fixed !important;}
</pre></td>
<td>固定定位</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute<br>
.zi-absolute</td>
<td><pre class="z-text-preline">
.z-absolute{position:absolute;}
.zi-absolute{position:absolute !important;}
</pre></td>
<td>绝对定位</td>
</tr>
<tr>
<td class="z-samp">
.z-relative<br>
.zi-relative</td>
<td><pre class="z-text-preline">
.z-relative{position:relative;}
.zi-relative{position:relative !important;}
</pre></td>
<td>相对定位</td>
</tr>
</table>
<#-- 二、块浮动对齐 -->
<div class="tutorial title">二、块浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-float-left<br>.zi-float-left</td>
<td><pre class="z-text-preline">
.z-float-left{float:left;}
.zi-float-left{float:left !important;}
</pre></td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-center<br>.zi-float-center</td>
<td><pre class="z-text-preline">
.z-float-center{margin-left:auto;margin-right:auto;}
.zi-float-center{margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.z-float-right<br>.zi-float-right</td>
<td><pre class="z-text-preline">
.z-float-right{float:right;}
.zi-float-right{float:right !important;}
</pre></td>
<td>右对齐</td>
</tr>
</table>
<#-- 三、块定位+浮动对齐 -->
<div class="tutorial title">三、块定位+浮动对齐</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="23%">名称</td>
<td width="*">样式</td>
<td width="16%">说明</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-left<br>
.zi-relative-left</td>
<td><pre class="z-text-preline">
.z-relative-left{position:relative;float:left;}
.zi-relative-left{position:relative !important;float:left !important;}
</pre></td>
<td>相对左对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-center<br>
.zi-relative-center</td>
<td><pre class="z-text-preline">
.z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
.zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
</pre></td>
<td>相对居中</td>
</tr>
<tr>
<td class="z-samp">
.z-relative-right<br>
.zi-relative-right</td>
<td><pre class="z-text-preline">
.z-relative-right{position:relative;float:right;}
.zi-relative-right{position:relative !important;float:right !important;}
</pre></td>
<td>相对右对齐</td>
</tr>
<tr>
<td class="z-samp">
.z-absolute-center-middle<br>
.zi-absolute-center-middle</td>
<td><pre class="z-text-preline">
.z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
.zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
</pre></td>
<td>绝对居中，内部块在父块的上下左右居中</td>
</tr>
</table>
<#-- 四、块溢出 -->
<div class="tutorial title">四、块溢出</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-auto</td>
<td><pre class="z-text-preline">
.z-overflow-auto{overflow:auto;}
</pre></td>
<td>块溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-hidden{overflow:hidden;}
</pre></td>
<td>块溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-scroll{overflow:scroll;}
</pre></td>
<td>块始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-auto</td>
<td><pre class="z-text-preline">
.z-overflow-x-auto{overflow-x:auto;}
</pre></td>
<td>块X轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-x-hidden{overflow-x:hidden;}
</pre></td>
<td>块X轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-x-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-x-scroll{overflow-x:scroll;}
</pre></td>
<td>块X轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-auto</td>
<td><pre class="z-text-preline">
.z-overflow-y-auto{overflow-y:auto;}
</pre></td>
<td>块Y轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-hidden</td>
<td><pre class="z-text-preline">
.z-overflow-y-hidden{overflow-y:hidden;}
</pre></td>
<td>块Y轴溢出的部分不显示</td>
</tr>
<tr>
<td class="z-samp">.z-overflow-y-scroll</td>
<td><pre class="z-text-preline">
.z-overflow-y-scroll{overflow-y:scroll;}
</pre></td>
<td>块Y轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
</table>
<#-- 五、块手势 -->
<div class="tutorial title">五、块鼠标标志</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">样式</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-pointer</td>
<td><pre class="z-text-preline">
.z-pointer{cursor:pointer;}
</pre></td>
<td>显示手标志，即可点击状态</td>
</tr>
<tr>
<td class="z-samp">.z-forbidden</td>
<td><pre class="z-text-preline">
.z-forbidden{cursor:not-allowed;}
</pre></td>
<td>禁止使用，显示禁止标志</td>
</tr>
</table>
<#-- 六、块隐藏和显示 -->
<div class="tutorial title">六、块隐藏和显示</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="*">举例</td>
<td width="40%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-hide<br>.zi-hide</td>
<td><pre class="z-text-preline">
.z-hide{display:none;}
.zi-hide{display:none !important;}
</pre>
</td>
<td>隐藏，不占位</td>
</tr>
<tr>
<td class="z-samp">
.z-show<br>.z-show-b<br>.z-show-ib<br>
.zi-show<br>.zi-show-b<br>.zi-show-ib
</td>
<td><pre class="z-text-preline">
.z-show{display:inline;}
.z-show-b{display:block;}
.z-show-ib{display:inline-block;}
.zi-show{display:inline !important;}
.zi-show-b{display:block !important;}
.zi-show-ib{display:inline-block !important;}
</pre></td>
<td class="z-samp">
显示的三种状态<br>
1、z-show适用于<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>
<!-- 右侧demo ZmUI代码 -->
${zhiqim_com_ZmUI_demo_start()}
<div class="z-bar-top">
<a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
<div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
<a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
<a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
<div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_com_ZmUI_demo_end()}
<!-- content结束 -->
</div>
${zhiqim_com_chapter()}
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}