参考文章：http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=408
首先，先讲一下app的界面布局。
这里使用一个大的div来包含住header-div，main-div，footer-div，结构如下：
<body>
<div id="wrap"> //最外层框架，包裹着里面三个小框架
<div id="header"></div> //顶部框架
<div id="main"></div> //主体框架
<div id="footer"></div> //底部框架
</div>
</body>上面的css：
html,body{
height:100%;
}统一更上一级的元素与下一级的元素所用的height元素一直才能够让子元素起作用。
#wrap{
height:100%;
display:-webkit-box;
-webkit-box-orient:vertical;
text-align:center;
}height：元素说明他占满父元素的所有高度。
display：显示方式为伸缩盒。
-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式。
语法：
box-orient：horizontal | vertical | inline-axis | block-axis
默认值：horizontal
适用于：伸缩盒容器
继承性：无
动画性：否
计算值：指定值
取值：
horizontal： 设置伸缩盒对象的子元素从左到右水平排列
vertical： 设置伸缩盒对象的子元素从上到下纵向排列
inline-axis： 设置伸缩盒对象的子元素沿行轴排列
block-axis： 设置伸缩盒对象的子元素沿块轴排列 text-align：字体的排版方式
语法：
text-align：start | end | left | right | center | justify | match-parent | justify-all
默认值：start
适用于：块容器
继承性：有
动画性：否
计算值：指定值，除 match-parent 值外
取值：
left： 内容左对齐。
center： 内容居中对齐。
right： 内容右对齐。
justify： 内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start： 内容对齐开始边界。（CSS3）
end： 内容对齐结束边界。（CSS3）
match-parent： 这个值和 inherit 表现一致，只是该值继承的 start 或 end 关键字是针对父母的 <' direction '> 值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all： 效果等同于 justify，但还会让最后一行也两端对齐。（CSS3） * CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新
#header{
text-align:center;
background-color:#81a9c3;
color:#fff;
width:100%;
height:2.8125em;
}上面的属性与上面的差不多，这里就不一一去讲了。
#main{
-webkit-box-flex: 1;
width:100%;
}-webkit-box-flex:这个属性是伸缩盒中的父对象剩余没使用的空间里，填写占有多少份的意思。这里的header和footer的大小都是固定的，所以为了占满整个屏幕，我们就需要给main-div占大div的一份，就是剩下来没有用到的。
#footer{
height:50px;
line-height:20px;
width:100%;
text-align:center;
}line-height:即字体最底端与字体内部顶端之间的距离。
app的简单布局这里就讲完了。之后讲app的底部导航栏。
扫一扫
1606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
