移动端的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>
我只是个爱前端的姑娘