一：旧版
内容区用于按一定排版格式添加需要文本内容。
旧版中，内容区用 content-block 类表示，位于内容区内外的文本其排版格式不同；位于内容区内的文本也可以用title、inner、inset等类进行进一步排版。
<div class="page-content"> <p>内容区之外的文本，排版为：没有背景色，两边没有边距。</p> <!-- 1:普通内容区 --> <div class="content-block"> <p>内容区内的普通文本：背景透明、字体中等透明、两边有边距。</p> </div> <!-- 2:用白色背景包围的内容区 --> <div class="content-block"> <div class="content-block-inner">此处文本段落是普通内容区的升级版，有白色背景</div> </div> <!-- 3:有标题的普通内容区 --> <div class="content-block-title">内容区标题</div> <div class="content-block"> <p>普通文本内容：背景透明、字体中等透明、两边有边距。</p> </div> <!-- 4:有标题的白色背景内容区 --> <div class="content-block-title">标题</div> <div class="content-block"> <div class="content-block-inner"> <p>有白色背景的文本内容</p> </div> </div> <!-- 5:有标题的圆角便签式内容区 --> <div class="content-block-title">标题</div> <div class="content-block inset"> <div class="content-block-inner"> <p>白色背景的文本内容 </p> </div> </div> <!-- 6:有标题的 矩形(屏幕宽)便签式 内容区 --> <div class="content-block-title">标题</div> <div class="content-block tablet-inset"> <div class="content-block-inner"> <p>白色背景的文本内容。</p> </div> </div> </div>
二：新版
新版的内容区有几处变动：
1）标签改为 block
2）inner改为block-strong
3）增加了内容区的header和footer
<p>内容区外文本</p> <!-- 1:普通内容区--> <div class="block"> <p>普通文本风格：两边有边距、文本中等透明 </p> </div> <!-- 2:白色背景内容区 --> <div class="block block-strong"> <p>有白色背景的内容 </p> </div> <!--3:有标题的普通内容区 --> <div class="block-title">标题</div> <div class="block"> <p>普通文本风格：两边有边距、文本中等透明</p> </div> <!--4:有标题的白色背景内容区 --> <div class="block-title">标题</div> <div class="block block-strong"> <p>有白色背景的文本内容</p> </div> <!--5:有标题的圆角便签式内容区 --> <div class="block-title">标题</div> <div class="block block-strong inset"> <p>白色背景、圆角便签形状</p> </div> <!--6:有标题的矩形便签式内容区 --> <div class="block-title">标题</div> <div class="block block-strong tablet-inset"> <p>白色背景内容</p> </div> <!--7:有header和footer的内容区 --> <div class="block-title">标题</div> <div class="block"> <div class="block-header">头部内容</div> <p>普通文本内容 </p> <div class="block-footer">底部内容</div> </div>
