移动端的webapp页面布局

　　1、单视图层

　　三段式结构是单视图的一种最基本布局方式

　　

　　2、侧边栏

　　 侧边栏是一种特殊的视图，在不显示时，当前视图是盖在侧边栏至上的，当它被呼出时，视图一部分滑出屏幕外，侧边栏才被显示出来，它的高度等于页面可视区域的高度

     显示前：                                                         显示后：

　　                              

 

 

    侧边栏显示的时候：

<div class=”view sidebar show”></div>
<div class=”view current”></div>

    侧边栏隐藏时，当hide动画结束之后，移除hide样式

<div class=”view sidebar hide”></div>
<div class=”view current”></div>

  css样式：

  

<style type="text/css">
    .sidebar {
        z-index: 50;
        display: block;
        width: 80%;
    }
    .sidebar.show + .current {
        -webkit-transition: -webkit-transform 400ms;
        -webkit-transform: translate3d(80%,0,0);
    }
    .sidebar.hide + .current {
        -webkit-transition: -webkit-transform 400ms;
        -webkit-transform: translate3d(0,0,0);
    }
</style>