Framework7學習筆記之 塊/內容區
阿新 • • 發佈:2018-02-21
col 內容 table -h 段落 添加 pre tro 標簽
一:舊版
內容區用於按一定排版格式添加需要文本內容。
舊版中,內容區用 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學習筆記之 塊/內容區