layout

<!-- 遮罩层 -->   
<div class="overlay"></div> 

<!-- 头部 -->  
<header class="header"></header>

<!-- 中间内容容器层 -->  
<main id="pages" class="page-wrap">    
    <!-- 页面1 -->
    <div class="page">    
        <!-- 中间内容滚动层 --> 
        <div class="content">    
            ...
        </div>

        <!-- 底部 -->    
        <footer class="footer"></footer>
    </div>

    <!-- 页面2 -->
    <div class="page"></div>   
    ...
</main>

<!-- 交互层如pop,tips,modal,panel等 --> 
<section>   
</section>
...

1. '.overlay'作为交互的蒙版层
2. header和footer采用fixed定位，header独立出来（适合hybrid干掉头部），footer放在单个页面里面
3. #pages作为所有页面的容器，一个.page代表一个页面，每个.page都可以独立布局 页面切换发生在article.page上，class分别为'.page--left','.page--right'，切换动画分别为：'.page--in','.page--out'
4. 默认article.page的padding-top为header的高度，且额外提供了一个扩展的class'.has-header'来取消padding-top，当然也可以给上面的page一个特殊的class，来设置里面的布局
5. 除此之外，提供了两个class来设置页面的padding，分别为'.p10','.plr10'，可以挂靠在`.content`中的标签上
6. 拥有底部footer的，需要在`.content`中再添加一层结构来空出footer占的位置，可参看nav的demo
7. 如果除header外，上面还有需要fixed定位的元素，请在`.content`前面添加`.header-sub`，可参考search的demo，或自定义，可参考calendar的demo
8. 所有的交互层插在body结束之前

注：当父元素设置了transform值的时候，子元素的fixed的定位方式不再是根元素，而是transform的父元素