Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。
text.htm30KB
<#def title = "文本样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
<#def prevUrl = "ico.htm"/>
<#def nextUrl = "block.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "css", "text")}
<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "文本样式")}
<div class="content">
<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
<p class="z-text-blue">文本样式：</p>
<p class="z-color-333" style="text-indent:38px;">
文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
</p>
</div>
<#-- 一、粗斜体上下标和删除线下划线文本 -->
<div class="tutorial title">一、粗斜体、上下标、删除线、下划线、标记字体、缩写效果等标签样式和定义样式</div>
<table class="z-table z-bordered z-pd10 z-px16">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">b</td>
<td><pre class="z-text-preline">b{font-weight:bold;}</pre></td>
<td><b>微软雅黑字体</b></td>
<td>粗体</td>
</tr>
<tr>
<td class="z-samp">i</td>
<td><pre class="z-text-preline">i{font-style:italic;}</pre></td>
<td><i>微软雅黑字体</i></td>
<td>斜体</td>
</tr>
<tr>
<td class="z-samp">u</td>
<td><pre class="z-text-preline">u{text-decoration:underline;}</pre></td>
<td><u>带下划线文本效果</u></td>
<td>下划线体</td>
</tr>
<tr>
<td class="z-samp">del</td>
<td><pre class="z-text-preline">del{text-decoration:line-through;}</pre></td>
<td><del>带删除线文本效果</del></td>
<td>删除线体</td>
</tr>
<tr>
<td class="z-samp">small</td>
<td><pre class="z-text-preline">small{font-size:80%;}</pre></td>
<td><small>这里是小号文本效果</small></td>
<td>小号体，80%</td>
</tr>
<tr>
<td class="z-samp">sup</td>
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sup{top:-0.5em;}</pre></td>
<td>文本上标效果<sup>superscript</sup></td>
<td>上标</td>
</tr>
<tr>
<td class="z-samp">sub</td>
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sub{bottom:-0.25em;}</pre></td>
<td>文本下标效果<sub>subscript</sub></td>
<td>下标</td>
</tr>
<tr>
<td class="z-samp">mark</td>
<td><pre class="z-text-preline">mark{background:#ff0;color:#000;}</td>
<td>这里是<mark>标记字体效果<mark></td>
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
<td class="z-samp">abbr[title]</td>
<td><pre class="z-text-preline">abbr[title]{border-bottom:1px dotted;}<br>@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}</pre></td>
<td>这里是<abbr title="微软雅黑字体">MSYH</abbr>缩写效果</td>
<td>缩写体，显示下划虚线，firefox原来就有，所以要用hack去掉</td>
</tr>
<tr>
<td class="z-samp">.z-bold</td>
<td><pre class="z-text-preline">.z-bold{font-weight:bold;}</pre></td>
<td><span class="z-bold">这里是字体加粗效果</span></td>
<td>粗体</td>
</tr>
<tr>
<td class="z-samp">.z-italic</td>
<td><pre class="z-text-preline">.z-italic{font-style:italic;}</pre></td>
<td><span class="z-italic">这里是文本斜体效果</span></td>
<td>斜体</td>
</tr>
<tr>
<td class="z-samp">.z-underline</td>
<td><pre class="z-text-preline">.z-underline{text-decoration:underline;}</pre></td>
<td><span class="z-underline">带下划线文本效果</span></td>
<td>下划线体</td>
</tr>
<tr>
<td class="z-samp">.z-delline</td>
<td><pre class="z-text-preline">.z-delline{text-decoration:line-through;}</pre></td>
<td><span class="z-delline">带删除线文本效果</span></td>
<td>删除线体</td>
</tr>
<tr>
<td class="z-samp">.z-small</td>
<td><pre class="z-text-preline">.z-small{font-size:80%;}</pre></td>
<td><span class="z-small">这里是小号文本效果</span></td>
<td>小号体，80%</td>
</tr>
<tr>
<td class="z-samp">.z-sup</td>
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}</pre></td>
<td>文本上标效果<span class="z-sup">superscript</span></td>
<td>上标</td>
</tr>
<tr>
<td class="z-samp">.z-sub</td>
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}</pre></td>
<td>文本下标效果<span class="z-sub">subscript</span></td>
<td>下标</td>
</tr>
<tr>
<td class="z-samp">.z-mark</td>
<td><pre class="z-text-preline">.z-mark{background:#ff0;color:#000;}</pre></td>
<td>这里是<span class="z-mark">标记字体效果<mark></td>
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
</tr>
<tr>
<td class="z-samp">.z-abbr[title]</td>
<td><pre class="z-text-preline">.z-abbr[title]{border-bottom:1px dotted;}</pre></td>
<td>这里是<span class="z-abbr" title="微软雅黑字体">MSYH</span>缩写效果</td>
<td>缩写体，显示下划虚线</td>
</tr>
</table>
<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
<div class="tutorial title">二、文本换行、不换行、省略和隐藏等属性</div>
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-text-break</td>
<td><pre class="z-text-preline">.z-text-break{word-break:break-all; word-wrap:break-word;}</pre></td>
<td class="z-text-break">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>国人是不管英文是不是单词的，直接换行</td>
</tr>
<tr>
<td class="z-samp">.z-text-pre</td>
<td><pre class="z-text-preline">.z-text-pre{white-space:pre;}</td>
<td>
<span class="z-pre z-text-pre">
第一行第一行第一行第一行第一行
第二行
第三行
</span>
</td>
<td>保留空白符列表，类似于<pre>，每行nowrap，撑大</td>
</tr>
<tr>
<td class="z-samp">.z-text-prewrap</td>
<td><pre class="z-text-preline">.z-text-prewrap{white-space:pre-wrap;}</td>
<td>
<span class="z-pre z-text-prewrap">
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
第二行<br>
第三行<br>
</span>
</td>
<td>保留空白符列表，超时自动换行。</td>
</tr>
<tr>
<td class="z-samp">.z-text-preline</td>
<td><pre class="z-text-preline">.z-text-preline{white-space:pre-line;}</td>
<td>
<span class="z-pre z-text-preline">
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
第二行<br>
第三行<br>
</span>
</td>
<td>合并空白符列表，但是保留换行符。如果第一个字符是\n，<pre>会清理，.z-text-preline不会，需借助JS删除该字符，:first-line设置行高为0时IE/Webkit可以,Firefox不行</td>
</tr>
<tr>
<td class="z-samp">.z-text-nowrap</td>
<td><pre class="z-text-preline">.z-text-nowrap{white-space:nowrap;}</td>
<td class="z-text-nowrap">Except as required by law or in writing, the so</td>
<td>不换行，会把td撑大，直到遇到 <br> 标签为止。</td>
</tr>
<tr>
<td class="z-samp">.z-text-ellipsis</td>
<td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
<td><span class="z-bd z-w300 z-text-ellipsis">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>超过的显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
<tr>
<td class="z-samp">.z-text-clip</td>
<td><pre class="z-text-preline">.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
<td><span class="z-bd z-w300 z-text-clip">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
<td>超过的省略也不显示省略号，缺点是必须指定宽度，且只能是一行</td>
</tr>
</table>
<#-- 三、正文文本对齐方式 -->
<div class="tutorial title">三、正文文本对齐方式，其中z-为常用，zi-为优先</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">.z-text-left</td>
<td><pre class="z-text-preline">.z-text-left{text-align:left;}</pre></td>
<td class="z-text-left">文本左对齐<br>文本左对齐</td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.z-text-center</td>
<td><pre class="z-text-preline">.z-text-center{text-align:center;}</pre></td>
<td class="z-text-center">文本居中对齐<br>文本居中对齐</td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.z-text-right</td>
<td><pre class="z-text-preline">.z-text-right{text-align:right;}</pre></td>
<td class="z-text-right">文本右对齐<br>文本右对齐</td>
<td>右对齐</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">以下为文本对齐优先</td>
</tr>
<tr>
<td class="z-samp">.zi-text-left</td>
<td><pre class="z-text-preline">.zi-text-left{text-align:left !important;}</pre></td>
<td class="zi-text-left">文本左对齐<br>文本左对齐</td>
<td>左对齐</td>
</tr>
<tr>
<td class="z-samp">.zi-text-center</td>
<td><pre class="z-text-preline">.zi-text-center{text-align:center !important;}</pre></td>
<td class="zi-text-center">文本居中对齐<br>文本居中对齐</td>
<td>居中对齐</td>
</tr>
<tr>
<td class="z-samp">.zi-text-right</td>
<td><pre class="z-text-preline">.zi-text-right{text-align:right !important;}</pre></td>
<td class="zi-text-right">文本右对齐<br>文本右对齐</td>
<td>右对齐</td>
</tr>
</table>
<#-- ；四、标题样式（h1-h3） -->
<div class="tutorial title">四、标题样式（h1-h3）</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">h1</td>
<td><pre class="z-text-preline">h1{font-size:24px;color:#333;line-height:150%;}</pre></td>
<td><h1>微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</h1></td>
<td>H1字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">h2</td>
<td><pre class="z-text-preline">h2{font-size:22px;color:#333;line-height:150%;}</pre></td>
<td><h2>微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</h2></td>
<td>H2字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">h3</td>
<td><pre class="z-text-preline">h3{font-size:20px;color:#333;line-height:150%;}</pre></td>
<td><h3>微软雅黑字体，20号字体<br>微软雅黑字体，22号字体</h3></td>
<td>H3字体，上下边距14px</td>
</tr>
<tr>
<td class="z-samp">.z-h1</td>
<td><pre class="z-text-preline">.z-h1{font-size:24px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</pre></td>
<td><span class="z-h1">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
<td>模拟H1，当H1被覆盖时可以使用z-h1</td>
</tr>
<tr>
<td class="z-samp">.z-h2</td>
<td><pre class="z-text-preline">.z-h2{font-size:22px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</pre></td>
<td><span class="z-h2">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
<td>模拟H2，当H2被覆盖时可以使用z-h2</td>
</tr>
<tr>
<td class="z-samp">.z-h3</td>
<td><pre class="z-text-preline">.z-h3{font-size:20px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</pre></td>
<td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
<td>模拟H3，当H3被覆盖时可以使用z-h3</td>
</tr>
</table>
<#-- 五、正文文本字体大小（px10-px30） -->
<div class="tutorial title">五、正文文本字体大小（px10-px30），其中z-为常用，zi-为优先</div>
<table class="z-table z-bordered z-pd10">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
</tr>
<tr>
<td class="z-samp">.z-px10</td>
<td><pre class="z-text-preline">.z-px10{font-size:10px;}</pre></td>
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px11</td>
<td><pre class="z-text-preline">.z-px11{font-size:11px;}</pre></td>
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px12</td>
<td><pre class="z-text-preline">.z-px12{font-size:12px;}</pre></td>
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px13</td>
<td><pre class="z-text-preline">.z-px13{font-size:13px;}</pre></td>
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px14</td>
<td><pre class="z-text-preline">.z-px14{font-size:14px;}</pre></td>
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px15</td>
<td><pre class="z-text-preline">.z-px15{font-size:15px;}</pre></td>
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px16</td>
<td><pre class="z-text-preline">.z-px16{font-size:16px;}</pre></td>
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px17</td>
<td><pre class="z-text-preline">.z-px17{font-size:17px;}</pre></td>
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px18</td>
<td><pre class="z-text-preline">.z-px18{font-size:18px;}</pre></td>
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px19</td>
<td><pre class="z-text-preline">.z-px19{font-size:19px;}</pre></td>
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px20</td>
<td><pre class="z-text-preline">.z-px20{font-size:20px;}</pre></td>
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px22</td>
<td><pre class="z-text-preline">.z-px22{font-size:22px;}</pre></td>
<td><span class="z-px22 z-lh120p">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px24</td>
<td><pre class="z-text-preline">.z-px24{font-size:24px;}</pre></td>
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px26</td>
<td><pre class="z-text-preline">.z-px26{font-size:26px;}</pre></td>
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
</tr>
<tr>
<td class="z-samp">.z-px30</td>
<td><pre class="z-text-preline">.z-px30{font-size:30px;}</pre></td>
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></td>
</tr>
<tr>
<td colspan="3" class="zi-text-cyan">以下为文本优先zi-px10 - zi-px30</td>
</tr>
<tr>
<td class="z-samp">.zi-px10</td>
<td><pre class="z-text-preline">.zi-px10{font-size:10px !important;}</pre></td>
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px11</td>
<td><pre class="z-text-preline">.zi-px11{font-size:11px !important;}</pre></td>
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px12</td>
<td><pre class="z-text-preline">.zi-px12{font-size:12px !important;}</pre></td>
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px13</td>
<td><pre class="z-text-preline">.zi-px13{font-size:13px !important;}</pre></td>
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px14</td>
<td><pre class="z-text-preline">.zi-px14{font-size:14px !important;}</pre></td>
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px15</td>
<td><pre class="z-text-preline">.zi-px15{font-size:15px !important;}</pre></td>
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px16</td>
<td><pre class="z-text-preline">.zi-px16{font-size:16px !important;}</pre></td>
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px17</td>
<td><pre class="z-text-preline">.zi-px17{font-size:17px !important;}</pre></td>
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px18</td>
<td><pre class="z-text-preline">.zi-px18{font-size:18px !important;}</pre></td>
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px19</td>
<td><pre class="z-text-preline">.zi-px19{font-size:19px !important;}</pre></td>
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px20</td>
<td><pre class="z-text-preline">.zi-px20{font-size:20px !important;}</pre></td>
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px22</td>
<td><pre class="z-text-preline">.zi-px22{font-size:22px !important;}</pre></td>
<td><span class="z-px22">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px24</td>
<td><pre class="z-text-preline">.zi-px24{font-size:24px !important;}</pre></td>
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px26</td>
<td><pre class="z-text-preline">.zi-px26{font-size:26px !important;}</pre></td>
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
</tr>
<tr>
<td class="z-samp">.zi-px30</td>
<td><pre class="z-text-preline">.zi-px30{font-size:30px !important;}</pre></td>
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></td>
</tr>
</table>
<#-- 六、行高定义 -->
<div class="tutorial title">六、行高定义（像素高度 & 百分比高度）</div>
<table class="z-table z-bordered z-pd10 z-px14">
<tr bgcolor="#f5f5f5">
<td width="18%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">行高定义lh10-lh40</td>
</tr>
<tr>
<td class="z-samp">.z-lh10<br>.zi-lh10</td>
<td><pre class="z-text-preline">
.z-lh10{height:10px;}
.zi-lh10{height:10px !important;}
</pre></td>
<td><div class="z-bd z-lh10">行高<br>行高</div></td>
<td>行高10px</td>
</tr>
<tr>
<td class="z-samp">.z-lh12<br>.zi-lh12</td>
<td><pre class="z-text-preline">
.z-lh12{height:12px;}
.zi-lh12{height:12px !important;}
</pre></td>
<td><div class="z-bd z-lh12">行高<br>行高</div></td>
<td>行高12px</td>
</tr>
<tr>
<td class="z-samp">.z-lh14<br>.zi-lh14</td>
<td><pre class="z-text-preline">
.z-lh14{height:14px;}
.zi-lh14{height:14px !important;}
</pre></td>
<td><div class="z-bd z-lh14">行高<br>行高</div></td>
<td>行高14px</td>
</tr>
<tr>
<td class="z-samp">.z-lh15<br>.zi-lh15</td>
<td><pre class="z-text-preline">
.z-lh15{height:15px;}
.zi-lh15{height:15px !important;}
</pre></td>
<td><div class="z-bd z-lh15">行高<br>行高</div></td>
<td>行高15px</td>
</tr>
<tr>
<td class="z-samp">.z-lh16<br>.zi-lh16</td>
<td><pre class="z-text-preline">
.z-lh16{height:16px;}
.zi-lh16{height:16px !important;}
</pre></td>
<td><div class="z-bd z-lh16">行高<br>行高</div></td>
<td>行高16px</td>
</tr>
<tr>
<td class="z-samp">.z-lh18<br>.zi-lh18</td>
<td><pre class="z-text-preline">
.z-lh18{height:18px;}
.zi-lh18{height:18px !important;}
</pre></td>
<td><div class="z-bd z-lh18">行高<br>行高</div></td>
<td>行高18px</td>
</tr>
<tr>
<td class="z-samp">.z-lh20<br>.zi-lh20</td>
<td><pre class="z-text-preline">
.z-lh20{height:20px;}
.zi-lh20{height:20px !important;}
</pre></td>
<td><div class="z-bd z-lh20">行高<br>行高</div></td>
<td>行高20px</td>
</tr>
<tr>
<td class="z-samp">.z-lh22<br>.zi-lh22</td>
<td><pre class="z-text-preline">
.z-lh22{height:22px;}
.zi-lh22{height:22px !important;}
</pre></td>
<td><div class="z-bd z-lh22">行高<br>行高</div></td>
<td>行高22px</td>
</tr>
<tr>
<td class="z-samp">.z-lh25<br>.zi-lh25</td>
<td><pre class="z-text-preline">
.z-lh25{height:25px;}
.zi-lh25{height:25px !important;}
</pre></td>
<td><div class="z-bd z-lh25">行高<br>行高</div></td>
<td>行高25px</td>
</tr>
<tr>
<td class="z-samp">.z-lh28<br>.zi-lh28</td>
<td><pre class="z-text-preline">
.z-lh28{height:28px;}
.zi-lh28{height:28px !important;}
</pre></td>
<td><div class="z-bd z-lh28">行高<br>行高</div></td>
<td>行高28px</td>
</tr>
<tr>
<td class="z-samp">.z-lh30<br>.zi-lh30</td>
<td><pre class="z-text-preline">
.z-lh30{height:30px;}
.zi-lh30{height:30px !important;}
</pre></td>
<td><div class="z-bd z-lh30">行高<br>行高</div></td>
<td>行高30px</td>
</tr>
<tr>
<td class="z-samp">.z-lh35<br>.zi-lh35</td>
<td><pre class="z-text-preline">
.z-lh35{height:35px;}
.zi-lh35{height:35px !important;}
</pre></td>
<td><div class="z-bd z-lh35">行高<br>行高</div></td>
<td>行高35px</td>
</tr>
<tr>
<td class="z-samp">.z-lh40<br>.zi-lh40</td>
<td><pre class="z-text-preline">
.z-lh40{height:40px;}
.zi-lh40{height:40px !important;}
</pre></td>
<td><div class="z-bd z-lh40">行高<br>行高</div></td>
<td>行高40px</td>
</tr>
<tr>
<td colspan="4" class="zi-text-cyan">行高百分比</td>
</tr>
<tr>
<td class="z-samp">.z-lh100p<br>.zi-lh100p</td>
<td><pre class="z-text-preline">
.z-lh100p{line-height:100%;}
.zi-lh100p{line-height:100% !important;}
</pre></td>
<td><div class="z-bd z-lh100p">行高<br>行高</div></td>
<td>行高100%</td>
</tr>
<tr>
<td class="z-samp">.z-lh110p<br>.zi-lh110p</td>
<td><pre class="z-text-preline">
.z-lh110p{line-height:110%;}
.zi-lh110p{line-height:110% !important;}
</pre></td>
<td><div class="z-bd z-lh110p">行高<br>行高</div></td>
<td>行高110%</td>
</tr>
<tr>
<td class="z-samp">.z-lh120p<br>.zi-lh120p</td>
<td><pre class="z-text-preline">
.z-lh120p{line-height:120%;}
.zi-lh120p{line-height:120% !important;}
</pre></td>
<td><div class="z-bd z-lh120p">行高<br>行高</div></td>
<td>行高120%</td>
</tr>
<tr>
<td class="z-samp">.z-lh130p<br>.zi-lh130p</td>
<td><pre class="z-text-preline">
.z-lh130p{line-height:130%;}
.zi-lh130p{line-height:130% !important;}
</pre></td>
<td><div class="z-bd z-lh130p">行高<br>行高</div></td>
<td>行高130%</td>
</tr>
<tr>
<td class="z-samp">.z-lh140p<br>.zi-lh140p</td>
<td><pre class="z-text-preline">
.z-lh140p{line-height:140%;}
.zi-lh140p{line-height:140% !important;}
</pre></td>
<td><div class="z-bd z-lh140p">行高<br>行高</div></td>
<td>行高140%</td>
</tr>
<tr>
<td class="z-samp">.z-lh150p<br>.zi-lh150p</td>
<td><pre class="z-text-preline">
.z-lh150p{line-height:150%;}
.zi-lh150p{line-height:150% !important;}
</pre></td>
<td><div class="z-bd z-lh150p">行高<br>行高</div></td>
<td>行高150%</td>
</tr>
<tr>
<td class="z-samp">.z-lh180p<br>.zi-lh180p</td>
<td><pre class="z-text-preline">
.z-lh180p{line-height:180%;}
.zi-lh180p{line-height:180% !important;}
</pre></td>
<td><div class="z-bd z-lh180p">行高<br>行高</div></td>
<td>行高180%</td>
</tr>
<tr>
<td class="z-samp">.z-lh200p<br>.zi-lh200p</td>
<td><pre class="z-text-preline">
.z-lh200p{line-height:200%;}
.zi-lh200p{line-height:200% !important;}
</pre></td>
<td><div class="z-bd z-lh200p">行高<br>行高</div></td>
<td>行高200%</td>
</tr>
<tr>
<td class="z-samp">.z-lh250p<br>.zi-lh250p</td>
<td><pre class="z-text-preline">
.z-lh250p{line-height:250%;}
.zi-lh250p{line-height:250% !important;}
</pre></td>
<td><div class="z-bd z-lh250p">行高<br>行高</div></td>
<td>行高250%</td>
</tr>
</table>
<#-- 七、文本编码样式 -->
<div class="tutorial title">七、文本编码样式（编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑"）</div>
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
<tr bgcolor="#f5f5f5">
<td width="15%">名称</td>
<td width="36%">样式</td>
<td width="*">举例</td>
<td width="20%">说明</td>
</tr>
<tr>
<td class="z-samp">samp<br>.z-samp</td>
<td>
<pre class="z-text-preline">
samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
</pre>
</td>
<td>
<samp>samp{font-family:"Courier New"}</samp><br><br>
<span class="z-samp">.z-samp{border-radius:4px;}</span>
</td>
<td>无背景编码字体</td>
</tr>
<tr>
<td class="z-samp">kbd<br>.z-kbd</td>
<td>
<pre class="z-text-preline">
kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>kbd,.z-kbd{border-radius:4px;}</code>
kbd,.z-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);}
</pre>
</td>
<td>
<kbd>kbd{font-family:"Courier New"}</kbd><br><br>
<span class="z-kbd">.z-kbd{border-radius:4px;}</span>
</td>
<td>黑背景白字键盘输入字体</td>
</tr>
<tr>
<td class="z-samp">pre<br>.z-pre</td>
<td>
<pre class="z-text-preline">
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>pre{border-radius:4px;}</code>
pre{overflow:auto;display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #cccccc;}
pre code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
</pre>
</td>
<td>
<pre class="z-text-preline">
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
</pre>
<span class="z-pre z-text-preline"><code>.z-pre{border-radius:4px;}</code></span>
</td>
<td>预处理标记，默认是单行撑大、留白，这里增加了.z-text-preline，改为单行换行，留白合并<br><br>显示红色的为里面使用<code>封装</td>
</tr>
<tr>
<td class="z-samp">code<br>.z-code</td>
<td>
<pre class="z-text-preline">
code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
<code>code,.z-code{border-radius:4px;}</code>
code,.z-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;}
pre code,.z-pre .z-code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
</pre>
</td>
<td>
<code class="z-text-preline">code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</code><br><br>
<span class="z-code z-text-preline">.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</span><br><br>
<span class="z-pre z-text-preline"><span class="z-code">code{border-radius:4px;}</span></span>
</td>
<td>编码标记，默认是自动换行，且不保留空白<br><br>外边框是在显示红色的为使用<pre>内进行封装</td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}