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

<#def title = "使用rem"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "ZmUI整体风格使用rem作为长度单位，它是相对于html元素的font-size的一个单位。建议大家对需要适应页面大小的任何元素都使用rem为单位来定义。"/>
<#def prevUrl = "css.htm"/>
<#def nextUrl = "color.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "css", "rem")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "使用rem")}

<!-- 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">使用rem：</p>
    <p class="z-color-333" style="text-indent:38px;">
        ZmUI整体风格使用 rem 作为长度单位，它是相对于 html 元素的 font-size 的一个单位。建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。<br>
        关于其定义，可以参考 <a class="zi-text-blue z-weight-normal" href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" target="_blank">MDN上的定义</a>。
    </p>
</div>

<#-- HTML 标签的 font-size 定义 -->
<div class="tutorial title">HTML 标签的 font-size 定义</div>

<div class="z-float-left z-w100p z-lh200p">
    <div class="z-pd10 z-px18 z-lh200p">一、以 iphone6 为基准</div>
    <div class="z-pd10 z-px16">
    以 iphone6 的屏宽 375 作为媒体查询 font-size 计算的标准，再向更大更小进行变化；<br>
    此时 html 标签的 font-size 为 100px，默认字体大小为 .16rem(16px)，所有以 rem 定义的大小、长度均以此为基准进行计算。</div>
</div>


<div class="z-float-left z-w100p">
    <div class="z-pd10 z-px18 z-lh200p">二、媒体查询计算 font-size</div>
    <div class="z-pd10">
    <span class="z-text-prewrap z-pre">
@media screen and (max-width: 320px) {
    html {
        font-size:83.33px;
        font-size:26.66667vw
    }
}
...
@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:104.8px;
        font-size:26.66667vw
    }
}
...
@media screen and (min-width: 769px) {
    html {
        font-size:204.8px
    }
}
    </span>
    </div>
</div>

<#-- 通用的字体大小定义 -->
<div class="tutorial title">通用的字体大小定义</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
    <ul>
        <li>暂时保留 ZhiqimUI 中 px 的定义，如：z-px12、zi-px20。</li>
        <li>新增 rem 的定义方式，如：z-rem12、zi-rem20，分别表示 font-size:.12rem 和 font-size:.2rem !important。</li>
    </ul>
    <span class="z-text-prewrap z-pre">

.z-px10{font-size:10px;}
.z-px11{font-size:11px;}
.z-px12{font-size:12px;}
.z-px13{font-size:13px;}
.z-px14{font-size:14px;}
.z-px15{font-size:15px;}
.z-px16{font-size:16px;}
.z-px17{font-size:17px;}
.z-px18{font-size:18px;}
.z-px19{font-size:19px;}
.z-px20{font-size:20px;}
.z-px22{font-size:22px;}
.z-px24{font-size:24px;}
.z-px26{font-size:26px;}
.z-px30{font-size:30px;}
.z-px40{font-size:40px;}
.z-px50{font-size:50px;}

.zi-px10{font-size:10px !important;}
...
.zi-px50{font-size:50px !important;}

.z-rem12{font-size:.12rem;}
.z-rem13{font-size:.13rem;}
.z-rem14{font-size:.14rem;}
.z-rem15{font-size:.15rem;}
.z-rem16{font-size:.16rem;}
.z-rem17{font-size:.17rem;}
.z-rem18{font-size:.18rem;}
.z-rem19{font-size:.19rem;}
.z-rem20{font-size:.2rem;}
.z-rem22{font-size:.22rem;}
.z-rem24{font-size:.24rem;}
.z-rem25{font-size:.25rem;}
.z-rem26{font-size:.26rem;}
.z-rem28{font-size:.28rem;}
.z-rem30{font-size:.3rem;}
.z-rem32{font-size:.32rem;}
.z-rem35{font-size:.35rem;}
.z-rem36{font-size:.36rem;}
.z-rem40{font-size:.4rem;}
.z-rem50{font-size:.50rem;}

.zi-rem12{font-size:.12rem !important;}
...
.zi-rem50{font-size:.50rem !important;}
    </span>
</div>

<#-- width 和 height 定义 -->
<div class="tutorial title">width 和 height 定义</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
    <ul>
        <li>原 ZhiqimUI 中的定义具体数值的 z-w*、z-h* ，如： z-w100、z-h100；统一改成用 z- 前缀，单位为 rem，如： z-w100、z-h100。</li>
        <li>原 ZhiqimUI 中的定义百分比的 z-w5p、z-h50p 保留。</li>
    </ul>
    <span class="z-text-prewrap z-pre">

.z-w0{width:0;}
.z-w10{width:.1rem;}.z-w12{width:.12rem;}
.z-w14{width:.14rem;}.z-w15{width:.15rem;}
.z-w16{width:.16rem;}.z-w18{width:.18rem;}
.z-w20{width:.2rem;}.z-w22{width:.22rem;}
.z-w24{width:.24rem;}.z-w25{width:.25rem;}
.z-w28{width:.28rem;}.z-w30{width:.3rem;}
.z-w35{width:.35rem;}.z-w40{width:.4rem;}
.z-w45{width:.45rem;}.z-w50{width:.5rem;}
.z-w55{width:.55rem;}.z-w60{width:.6rem;}
.z-w65{width:.65rem;}.z-w70{width:.7rem;}
.z-w75{width:.75rem;}.z-w80{width:.8rem;}
.z-w85{width:.85rem;}.z-w90{width:.9rem;}
.z-w95{width:.95rem;}.z-w100{width:1rem;}
.z-w110{width:1.1rem;}.z-w120{width:1.2rem;}
.z-w130{width:1.3rem;}.z-w140{width:1.4rem;}
.z-w150{width:1.5rem;}.z-w160{width:1.6rem;}
.z-w170{width:1.7rem;}.z-w180{width:1.8rem;}
.z-w190{width:1.9rem;}.z-w200{width:2rem;}
.z-w230{width:2.3rem;}.z-w250{width:2.5rem;}
.z-w270{width:2.7rem;}.z-w300{width:3rem;}
.z-w400{width:4rem;}.z-w500{width:5rem;}
.z-w600{width:6rem;}.z-w700{width:7rem;}
.z-w800{width:8rem;}

.zi-w0{width:0 !important;}
...
.zi-w800{width:8rem !important;}

.z-w5p{width:5%;}.z-w8p{width:8%;}
.z-w10p{width:10%;}.z-w12p{width:12%;}
.z-w15p{width:15%;}.z-w30p{width:30%;}
.z-w40p{width:40%;}.z-w60p{width:60%;}
.z-w70p{width:70%;}.z-w80p{width:80%;}
.z-w90p{width:90%;}.z-w100p{width:100%;}
.z-w100p2,.z-w50p{width:50%;}
.z-w100p3{width:33.333333%;}
.z-w100p4,.z-w25p{width:25%;}
.z-w100p5,.z-w20p{width:20%;}
.z-w100p6{width:16.666666%;}
.z-w100p7{width:14.285714%;}
.z-w100p8{width:12.5%;}
.z-w100p9{width:11.111111%;}

.zi-w5p{width:5% !important;}.zi-w8p{width:8% !important;}
...
.zi-w100p9{width:11.111111% !important;}

.z-h0{height:0;}
.z-h10{height:.1rem;}.z-h12{height:.12rem;}
.z-h14{height:.14rem;}.z-h15{height:.15rem;}
.z-h16{height:.16rem;}.z-h18{height:.18rem;}
.z-h20{height:.2rem;}.z-h22{height:.22rem;}
.z-h24{height:.24rem;}.z-h25{height:.25rem;}
.z-h28{height:.28rem;}.z-h30{height:.3rem;}
.z-h32{height:.32rem;}.z-h35{height:.35rem;}
.z-h40{height:.4rem;}.z-h45{height:.45rem;}
.z-h50{height:.5rem;}.z-h55{height:.55rem;}
.z-h60{height:.6rem;}.z-h65{height:.65rem;}
.z-h70{height:.7rem;}.z-h75{height:.75rem;}
.z-h80{height:.8rem;}.z-h85{height:.85rem;}
.z-h90{height:.9rem;}.z-h95{height:.95rem;}
.z-h100{height:1rem;}.z-h110{height:1.1rem;}
.z-h120{height:1.2rem;}.z-h130{height:1.3rem;}
.z-h140{height:1.4rem;}.z-h150{height:1.5rem;}
.z-h160{height:1.6rem;}.z-h170{height:1.7rem;}
.z-h180{height:1.8rem;}.z-h190{height:1.9rem;}
.z-h200{height:2rem;}.z-h300{height:3rem;}
.z-h400{height:4rem;}.z-h500{height:5rem;}

.zi-h0{height:0 !important;}
...
.zi-h400{height:4rem !important;}.zi-h500{height:5rem !important;}

.z-h5p{height:5%;}.z-h8p{height:8%;}
.z-h10p{height:10%;}.z-h12p{height:12%;}
.z-h15p{height:15%;}.z-h20p{height:20%;}
.z-h30p{height:30%;}.z-h40p{height:40%;}
.z-h50p{height:50%;}.z-h60p{height:60%;}
.z-h70p{height:70%;}.z-h80p{height:80%;}
.z-h90p{height:90%;}.z-h100p{height:100%;}

.zi-h5p{height:5% !important;}.zi-h8p{height:8% !important;}
...
.zi-h90p{height:90% !important;}.zi-h100p{height:100% !important;}
    </span>
</div>

<#-- 行高 -->
<div class="tutorial title">行高</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
    <ul>
        <li>原 ZhiqimUI 中的定义具体数值的 z-lh*，如： z-lh15；统一改成用 z- 前缀，单位为 rem，如：z-lh15。</li>
        <li>原 ZhiqimUI 中的定义百分比的 z-lh100p、zi-lh50p 保留。</li>
    </ul>
    <span class="z-text-prewrap z-pre">
.z-lh0{line-height:0;}.z-lh10{line-height:.1rem;}
.z-lh12{line-height:.12rem;}.z-lh14{line-height:.14rem;}
.z-lh15{line-height:.15rem;}.z-lh16{line-height:.16rem;}
.z-lh18{line-height:.18rem;}.z-lh20{line-height:.2rem;}
.z-lh22{line-height:.22rem;}.z-lh24{line-height:.24rem;}
.z-lh25{line-height:.25rem;}.z-lh28{line-height:.28rem;}
.z-lh30{line-height:.3rem;}.z-lh32{line-height:.32rem;}
.z-lh35{line-height:.35rem;}.z-lh40{line-height:.4rem;}
.z-lh45{line-height:.45rem;}.z-lh50{line-height:.5rem;}
.z-lh55{line-height:.55rem;}.z-lh60{line-height:.6rem;}
.z-lh70{line-height:.7rem;}.z-lh80{line-height:.8rem;}
.z-lh90{line-height:.9rem;}.z-lh100{line-height:1rem;}

.zi-lh0{line-height:0 !important;}.zi-lh10{line-height:.1rem !important;}
...
.zi-lh90{line-height:.9rem !important;}.zi-lh100{line-height:1rem !important;}

.z-lh100p{line-height:100%;}.z-lh110p{line-height:110%;}
.z-lh120p{line-height:120%;}.z-lh130p{line-height:130%;}
.z-lh140p{line-height:140%;}.z-lh150p{line-height:150%;}
.z-lh180p{line-height:180%;}.z-lh200p{line-height:200%;}
.z-lh250p{line-height:250%;}.z-lh300p{line-height:300%;}

.zi-lh100p{line-height:100% !important;}.zi-lh110p{line-height:110% !important;}
.zi-lh120p{line-height:120% !important;}.zi-lh130p{line-height:130% !important;}
.zi-lh140p{line-height:140% !important;}.zi-lh150p{line-height:150% !important;}
.zi-lh180p{line-height:180% !important;}.zi-lh200p{line-height:200% !important;}
.zi-lh250p{line-height:250% !important;}.zi-lh300p{line-height:300% !important;}
    </span>
</div>

<#-- 内边距和外边距 -->
<div class="tutorial title">内边距和外边距</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
    <ul>
        <li>原 ZhiqimUI 中的定义具体数值的 z-pd*、z-pd-l*、z-mg*、z-mg-r* ，如： z-pd5、z-pd-l5、z-mg10、z-mg-t-10；统一改成用 z- 前缀，单位为 rem。</li>
        <li>新增 z-pd-lr*、z-pd-tb*、z-mg-lr*、z-mg-tb* 表示左右、上下的边距统一设置。</li>
        <li>针对 1px 边框，可能存在的 负偏移，新增 z-mg-t-1px 表示向上偏移 -1px；left、right、bottom方向同理。</li>
        <li>外边距新增 auto属性。</li>
    </ul>
    <span class="z-text-prewrap z-pre">
.z-pd0{padding:0;}.z-pd1{padding:.01rem;}
.z-pd2{padding:.02rem;}.z-pd3{padding:.03rem;}
.z-pd4{padding:.04rem;}.z-pd5{padding:.05rem;}
.z-pd6{padding:.06rem;}.z-pd7{padding:.07rem;}
.z-pd8{padding:.08rem;}.z-pd9{padding:.09rem;}
.z-pd10{padding:.1rem;}.z-pd12{padding:.12rem;}
.z-pd14{padding:.14rem;}.z-pd15{padding:.15rem;}
.z-pd16{padding:.16rem;}.z-pd18{padding:.18rem;}
.z-pd20{padding:.2rem;}.z-pd24{padding:.24rem;}
.z-pd25{padding:.25rem;}.z-pd26{padding:.25rem;}
.z-pd28{padding:.28rem;}.z-pd30{padding:.3rem;}

.zi-pd0{padding:0 !important;}.zi-pd1{padding:.01rem !important;}
...
.zi-pd28{padding:.28rem !important;}.zi-pd30{padding:.3rem !important;}

.z-pd-l0{padding-left:0;}.z-pd-l1{padding-left:.01rem;}
.z-pd-l2{padding-left:.02rem;}.z-pd-l3{padding-left:.03rem;}
.z-pd-l4{padding-left:.04rem;}.z-pd-l5{padding-left:.05rem;}
.z-pd-l6{padding-left:.06rem;}.z-pd-l7{padding-left:.07rem;}
.z-pd-l8{padding-left:.08rem;}.z-pd-l9{padding-left:.09rem;}
.z-pd-l10{padding-left:.1rem;}.z-pd-l12{padding-left:.12rem;}
.z-pd-l14{padding-left:.14rem;}.z-pd-l15{padding-left:.15rem;}
.z-pd-l16{padding-left:.16rem;}.z-pd-l18{padding-left:.18rem;}
.z-pd-l20{padding-left:.2rem;}.z-pd-l24{padding-left:.24rem;}
.z-pd-l25{padding-left:.25rem;}.z-pd-l26{padding-left:.25rem;}
.z-pd-l28{padding-left:.28rem;}.z-pd-l30{padding-left:.3rem;}

.zi-pd-l0{padding-left:0 !important;}.zi-pd-l1{padding-left:.01rem !important;}
...
.zi-pd-l28{padding-left:.28rem !important;}.zi-pd-l30{padding-left:.3rem !important;}

...为省略篇幅，类似代码省略...

.z-pd-lr0{padding-left:0;padding-right:0;}.z-pd-lr1{padding-left:.01rem;padding-right:.01rem;}
.z-pd-lr2{padding-left:.02rem;padding-right:.02rem;}.z-pd-lr3{padding-left:.03rem;padding-right:.03rem;}
.z-pd-lr4{padding-left:.04rem;padding-right:.04rem;}.z-pd-lr5{padding-left:.05rem;padding-right:.05rem;}
.z-pd-lr6{padding-left:.06rem;padding-right:.06rem;}.z-pd-lr7{padding-left:.07rem;padding-right:.07rem;}
.z-pd-lr8{padding-left:.08rem;padding-right:.08rem;}.z-pd-lr9{padding-left:.09rem;padding-right:.09rem;}
.z-pd-lr10{padding-left:.1rem;padding-right:.1rem;}.z-pd-lr12{padding-left:.12rem;padding-right:.12rem;}
.z-pd-lr14{padding-left:.14rem;padding-right:.14rem;}.z-pd-lr15{padding-left:.15rem;padding-right:.15rem;}
.z-pd-lr16{padding-left:.16rem;padding-right:.16rem;}.z-pd-lr18{padding-left:.18rem;padding-right:.18rem;}
.z-pd-lr20{padding-left:.2rem;padding-right:.2rem;}.z-pd-lr24{padding-left:.24rem;padding-right:.24rem;}
.z-pd-lr25{padding-left:.25rem;padding-right:.25rem;}.z-pd-lr26{padding-left:.25rem;padding-right:.25rem;}
.z-pd-lr28{padding-left:.28rem;padding-right:.28rem;}.z-pd-lr30{padding-left:.3rem;padding-right:.3rem;}

.zi-pd-lr0{padding-left:0 !important;padding-right:0 !important;}.zi-pd-lr1{padding-left:.01rem !important;padding-right:.01rem !important;}
...
.zi-pd-lr28{padding-left:.28rem !important;padding-right:.28rem !important;}.zi-pd-lr30{padding-left:.3rem !important;padding-right:.3rem !important;}

...为省略篇幅，类似代码省略...

.z-mg-0{margin:0;}.z-mg1{margin:.01rem;}
.z-mg2{margin:.02rem;}.z-mg3{margin:.03rem;}
.z-mg4{margin:.04rem;}.z-mg5{margin:.05rem;}
.z-mg6{margin:.06rem;}.z-mg7{margin:.07rem;}
.z-mg8{margin:.08rem;}.z-mg9{margin:.09rem;}
.z-mg10{margin:.1rem;}.z-mg12{margin:.12rem;}
.z-mg14{margin:.14rem;}.z-mg15{margin:.15rem;}
.z-mg16{margin:.16rem;}.z-mg18{margin:.18rem;}
.z-mg20{margin:.2rem;}.z-mg24{margin:.24rem;}
.z-mg25{margin:.25rem;}.z-mg26{margin:.25rem;}
.z-mg28{margin:.28rem;}.z-mg30{margin:.3rem;}

.zi-mg0{margin:0 !important;}.zi-mg1{margin:.01rem !important;}
...
.zi-mg28{margin:.28rem !important;}.zi-mg30{margin:.3rem !important;}

.z-mg-t0{margin-top:0;}.z-mg-t1{margin-top:.01rem;}
.z-mg-t2{margin-top:.02rem;}.z-mg-t3{margin-top:.03rem;}
.z-mg-t4{margin-top:.04rem;}.z-mg-t5{margin-top:.05rem;}
.z-mg-t6{margin-top:.06rem;}.z-mg-t7{margin-top:.07rem;}
.z-mg-t8{margin-top:.08rem;}.z-mg-t9{margin-top:.09rem;}
.z-mg-t10{margin-top:.1rem;}.z-mg-t12{margin-top:.12rem;}
.z-mg-t14{margin-top:.14rem;}.z-mg-t15{margin-top:.15rem;}
.z-mg-t16{margin-top:.16rem;}.z-mg-t18{margin-top:.18rem;}
.z-mg-t20{margin-top:.2rem;}.z-mg-t24{margin-top:.24rem;}
.z-mg-t25{margin-top:.25rem;}.z-mg-t26{margin-top:.25rem;}
.z-mg-t28{margin-top:.28rem;}.z-mg-t30{margin-top:.3rem;}

.zi-mg-t0{margin-top:0 !important;}.zi-mg-t1{margin-top:.01rem !important;}
...
.zi-mg-t28{margin-top:.28rem !important;}.zi-mg-t30{margin-top:.3rem !important;}

...为省略篇幅，类似代码省略...

.z-mg-t-1{margin-top:-.01rem;}.z-mg-t-2{margin-top:-.02rem;}
.z-mg-t-3{margin-top:-.03rem;}.z-mg-t-4{margin-top:-.04rem;}
.z-mg-t-5{margin-top:-.05rem;}.z-mg-t-6{margin-top:-.06rem;}
.z-mg-t-7{margin-top:-.07rem;}.z-mg-t-8{margin-top:-.08rem;}
.z-mg-t-9{margin-top:-.09rem;}.z-mg-t-10{margin-top:-.1rem;}
.z-mg-t-12{margin-top:-.12rem;}.z-mg-t-14{margin-top:-.14rem;}
.z-mg-t-15{margin-top:-.15rem;}.z-mg-t-16{margin-top:-.16rem;}
.z-mg-t-18{margin-top:-.18rem;}.z-mg-t-20{margin-top:-.2rem;}
.z-mg-t-24{margin-top:-.24rem;}.z-mg-t-25{margin-top:-.25rem;}
.z-mg-t-26{margin-top:-.25rem;}.z-mg-t-28{margin-top:-.28rem;}
.z-mg-t-30{margin-top:-.3rem;}

.zi-mg-t-1{margin-top:-.01rem !important;}.zi-mg-t-2{margin-top:-.02rem !important;}
...
.zi-mg-t-30{margin-top:-.3rem !important;}

...为省略篇幅，类似代码省略...

.z-mg-t-1px{margin-top:-1px;}
.z-mg-r-1px{margin-right:-1px;}
.z-mg-l-1px{margin-left:-1px;}
.z-mg-b-1px{margin-bottom:-1px;}

.zi-mg-t-1px{margin-top:-1px !important;}
.zi-mg-r-1px{margin-right:-1px !important;}
.zi-mg-l-1px{margin-left:-1px !important;}
.zi-mg-b-1px{margin-bottom:-1px !important;}

.z-mg-auto{margin:auto;}
.z-mg-l-auto{margin-left:auto;}
.z-mg-r-auto{margin-right:auto;}
.z-mg-t-auto{margin-top:auto;}
.z-mg-b-auto{margin-bottom:auto;}
.z-mg-lr-auto{margin-left:auto;margin-right:auto;}
.z-mg-tb-auto{margin-top:auto;margin-bottom:auto;}

.zi-mg-auto{margin:auto !important;}
.zi-mg-l-auto{margin-left:auto !important;}
.zi-mg-r-auto{margin-right:auto !important;}
.zi-mg-t-auto{margin-top:auto !important;}
.zi-mg-b-auto{margin-bottom:auto !important;}
.zi-mg-lr-auto{margin-left:auto !important;margin-right:auto !important;}
.zi-mg-tb-auto{margin-top:auto !important;margin-bottom:auto !important;}
    </span>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_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_turorial_ZmUI_demo_end()}

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

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

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

${zhiqim_com_footer()}