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

<#def title = "块样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/>
<#def prevUrl = "text.htm"/>
<#def nextUrl = "../js/js.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}

${zhiqim_com_mobileUI_scrollJs()}

<!--容器开始 -->
<div id="container" class="container">
${zhiqim_com_ui("tutorial", "ui", "css", "block")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "块样式")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">块样式：</p>
    <p class="z-color-333" style="text-indent:38px;">
        块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。
    </p>
</div>

<#-- 一、块定位 -->
<div class="tutorial title">一、块定位</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="*">样式</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">
        .z-fixed<br>
        .zi-fixed
    </td>
    <td><pre class="z-text-preline">
        .z-fixed{position:fixed;}
        .zi-fixed{position:fixed !important;}
    </pre></td>
    <td>固定定位</td>
</tr>
<tr>
    <td class="z-samp">
        .z-absolute<br>
        .zi-absolute</td>
    <td><pre class="z-text-preline">
        .z-absolute{position:absolute;}
        .zi-absolute{position:absolute !important;}
    </pre></td>
    <td>绝对定位</td>
</tr>
<tr>
    <td class="z-samp">
        .z-relative<br>
        .zi-relative</td>
    <td><pre class="z-text-preline">
        .z-relative{position:relative;}
        .zi-relative{position:relative !important;}
    </pre></td>
    <td>相对定位</td>
</tr>
</table>

<#-- 二、块浮动对齐 -->
<div class="tutorial title">二、块浮动对齐</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="*">样式</td>
    <td width="20%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-float-left<br>.zi-float-left</td>
    <td><pre class="z-text-preline">
        .z-float-left{float:left;}
        .zi-float-left{float:left !important;}
    </pre></td>
    <td>左对齐</td>
</tr>
<tr>
    <td class="z-samp">.z-float-center<br>.zi-float-center</td>
    <td><pre class="z-text-preline">
        .z-float-center{margin-left:auto;margin-right:auto;}
        .zi-float-center{margin-left:auto !important;margin-right:auto !important;}
    </pre></td>
    <td>居中对齐</td>
</tr>
<tr>
    <td class="z-samp">.z-float-right<br>.zi-float-right</td>
    <td><pre class="z-text-preline">
        .z-float-right{float:right;}
        .zi-float-right{float:right !important;}
    </pre></td>
    <td>右对齐</td>
</tr>
</table>

<#-- 三、块定位+浮动对齐 -->
<div class="tutorial title">三、块定位+浮动对齐</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="23%">名称</td>
    <td width="*">样式</td>
    <td width="16%">说明</td>
</tr>
<tr>
    <td class="z-samp">
        .z-relative-left<br>
        .zi-relative-left</td>
    <td><pre class="z-text-preline">
        .z-relative-left{position:relative;float:left;}
        .zi-relative-left{position:relative !important;float:left !important;}
    </pre></td>
    <td>相对左对齐</td>
</tr>
<tr>
    <td class="z-samp">
        .z-relative-center<br>
        .zi-relative-center</td>
    <td><pre class="z-text-preline">
        .z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
        .zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
    </pre></td>
    <td>相对居中</td>
</tr>
<tr>
    <td class="z-samp">
        .z-relative-right<br>
        .zi-relative-right</td>
    <td><pre class="z-text-preline">
        .z-relative-right{position:relative;float:right;}
        .zi-relative-right{position:relative !important;float:right !important;}
    </pre></td>
    <td>相对右对齐</td>
</tr>
<tr>
    <td class="z-samp">
        .z-absolute-center-middle<br>
        .zi-absolute-center-middle</td>
    <td><pre class="z-text-preline">
        .z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
        .zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
    </pre></td>
    <td>绝对居中，内部块在父块的上下左右居中</td>
</tr>

</table>

<#-- 四、块溢出 -->
<div class="tutorial title">四、块溢出</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="*">样式</td>
    <td width="40%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-auto</td>
    <td><pre class="z-text-preline">
        .z-overflow-auto{overflow:auto;}
    </pre></td>
    <td>块溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-hidden</td>
    <td><pre class="z-text-preline">
        .z-overflow-hidden{overflow:hidden;}
    </pre></td>
    <td>块溢出的部分不显示</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-scroll</td>
    <td><pre class="z-text-preline">
        .z-overflow-scroll{overflow:scroll;}
    </pre></td>
    <td>块始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-x-auto</td>
    <td><pre class="z-text-preline">
        .z-overflow-x-auto{overflow-x:auto;}
    </pre></td>
    <td>块X轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-x-hidden</td>
    <td><pre class="z-text-preline">
        .z-overflow-x-hidden{overflow-x:hidden;}
    </pre></td>
    <td>块X轴溢出的部分不显示</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-x-scroll</td>
    <td><pre class="z-text-preline">
        .z-overflow-x-scroll{overflow-x:scroll;}
    </pre></td>
    <td>块X轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-y-auto</td>
    <td><pre class="z-text-preline">
        .z-overflow-y-auto{overflow-y:auto;}
    </pre></td>
    <td>块Y轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-y-hidden</td>
    <td><pre class="z-text-preline">
        .z-overflow-y-hidden{overflow-y:hidden;}
    </pre></td>
    <td>块Y轴溢出的部分不显示</td>
</tr>
<tr>
    <td class="z-samp">.z-overflow-y-scroll</td>
    <td><pre class="z-text-preline">
        .z-overflow-y-scroll{overflow-y:scroll;}
    </pre></td>
    <td>块Y轴始终显示滚动条，不管内部高度是否超过</td>
</tr>
</table>

<#-- 五、块手势 -->
<div class="tutorial title">五、块鼠标标志</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="*">样式</td>
    <td width="40%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-pointer</td>
    <td><pre class="z-text-preline">
        .z-pointer{cursor:pointer;}
    </pre></td>
    <td>显示手标志，即可点击状态</td>
</tr>
<tr>
    <td class="z-samp">.z-forbidden</td>
    <td><pre class="z-text-preline">
        .z-forbidden{cursor:not-allowed;}
    </pre></td>
    <td>禁止使用，显示禁止标志</td>
</tr>
</table>

<#-- 六、块隐藏和显示 -->
<div class="tutorial title">六、块隐藏和显示</div>

<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
    <td width="18%">名称</td>
    <td width="*">举例</td>
    <td width="40%">说明</td>
</tr>
<tr>
    <td class="z-samp">.z-hide<br>.zi-hide</td>
    <td><pre class="z-text-preline">
        .z-hide{display:none;}
        .zi-hide{display:none !important;}
        </pre>
    </td>
    <td>隐藏，不占位</td>
</tr>
<tr>
    <td class="z-samp">
        .z-show<br>.z-show-b<br>.z-show-ib<br>
        .zi-show<br>.zi-show-b<br>.zi-show-ib
    </td>
    <td><pre class="z-text-preline">
        .z-show{display:inline;}
        .z-show-b{display:block;}
        .z-show-ib{display:inline-block;}
        .zi-show{display:inline !important;}
        .zi-show-b{display:block !important;}
        .zi-show-ib{display:inline-block !important;}
        </pre></td>
    <td class="z-samp">
        显示的三种状态<br>
        1、z-show适用于&lt;span&gt;,&lt;a&gt;,&lt;label&gt;,&lt;input&gt;,&lt;img&gt;<br>
        2、z-show-b适用&lt;div&gt;,&lt;p&gt;,&lt;h1&gt;,&lt;form&gt;,&lt;ul&gt;&lt;li&gt;<br>
        3、z-show-ib适用于把块作为内联方式。
        </td>
</tr>
<tr>
    <td class="z-samp">.z-visible<br>.zi-visible</td>
    <td><pre class="z-text-preline">
        .z-visible{visibility:visible !important;}
        .zi-visible{visibility:visible !important;}
    </pre></td>
    <td>用于保留占位的显示</td>
</tr>
<tr>
    <td class="z-samp">.z-hidden<br>.zi-hidden<br></td>
    <td><pre class="z-text-preline">
        .z-hidden{visibility:hidden !important;}
        .zi-hidden{visibility:hidden !important;}
    </pre></td>
    <td>用于保留占位的隐藏</td>
</tr>
</table>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_com_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_com_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}