一：舊版

內容區用於按一定排版格式添加需要文本內容。

舊版中，內容區用 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>

Framework7學習筆記之 塊/內容區