Framework7学习笔记之 块/内容区

一：旧版

内容区用于按一定排版格式添加需要文本内容。

旧版中，内容区用  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>

原文地址：https://www.cnblogs.com/ygj0930/p/8456303.html