Layout
概述
本页面的 HTML 结构是为演示效果而特别编写的，不具有实际参考意义。所有元素的 HTML 结构约定请以各元素的相关描述为准。（以下示例中的绿色虚线表示容器边界。）
一个 HTML 页面可能包含多个 “view”。一个 view 就是一个功能视图，页面中至少应包含一个 view，其中第一个 view 称作 root view（主视图），其它称作 sub view（子视图）。每个 view 都应该被放置在单独的
body > article.subview 元素中。
因此整个 HTML 文档的结构应该是这样的（以 L2V 为例）：
html
head
body
article.subview#listing-view //主视图（必需）
article.subview#vad-view //子视图（可选）
article.subview#other-view //子视图（可选）
每个 view 内的主要结构应该是这样的：
article.subview //页面级容器
header //页头
main //页面主体
footer //页脚
多个 view 之间切换应该由 Subview 这个组件来实现，详见 Subview 组件的文档。
View 内的各个区块详见如下各小节。
页头
页头可以包含一个或多个导航元素。
通常页头内唯一的导航元素就是导航栏（导航栏的具体结构和样式参见下一节）。
header //页头区域
nav.cm-nav-bar //导航栏
除了导航栏之外，你还可以在页头中添加其它导航元素（比如面包屑）。
header //页头区域
nav.cm-nav-bar //导航栏
nav //其它导航元素
视图主体
视图主体由
<main> 元素来实现。<main> 元素没有设置水平内边距，其内部元素在默认情况下都是 “水平满幅” 的布局。
<main> 元素与页头页脚之间没有设置任何垂直外边距。如果视图主体的内容需要与页头页尾保持距离，可以通过设置内容元素的垂直外边距来实现。
逻辑区块
视图主体往往由多个逻辑区块组成，逻辑区块建议采用
<section> 元素来标记。因此页面主体的结构往往是这样的：
article.subview > main //页面主体
section //逻辑区块
section //逻辑区块
...
注意
<section>元素没有任何特殊样式，因此你需要另行设置垂直外边距才能将它们分离开。-
<section>元素没有设置水平内边距，其内部元素在默认情况下都是 “水平满幅” 的布局。如果你需要某个<section>具有水平内边距以防止其内容碰到视图边缘，请对它添加以下样式：
padding-left $cm-content-padding
padding-right $cm-content-padding
逻辑区块可以包含一个标题元素（可选）和一个内容元素（必需）。
标题元素
逻辑区块的标题元素需要添加 .cm-section-title 这个类。
它设置了水平内边距，以免文字贴在容器边缘；字体不加粗，颜色为灰色；背景透明，因此可以透过它看见 Subview 的背景色。
内容元素
逻辑区块的内容元素需要添加 .cm-section-content 这个类。
它将具有白色背景，但没有边框和投影；它是一个容器，因此也没有其它特殊样式。
示例
如果一个逻辑区块拥有标题，则它的结构可能是这样的：
section
h2.cm-section-title "区块标题"
div.cm-section-content
p "区块内容"
如果把以上代码重复两遍，则对应的效果如下：（绿色虚线表示容器边界）
区块标题
区块内容
区块标题
区块内容