手机APP开发轻松学（一）-51RGB
dreamweaver免费视频教程：http://www.51rgb.com/mproductzh.aspx?classid=31
加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货！
[技术分享] 从0开始写"脉脉"(一) —— 首页布局分析
1、首页分成了上、中、下三块：header(粉红色)、main(绿色)、footer(黄色)，这三块是垂直布局的，并且header和footer的高度是固定的，而main的高度将占满窗口剩余部分。
2、header分为四个部分：左右各一个按钮、中间两个文本标签(下面有个滑块，它会根据选择动态改变位置)。
3、main布局复杂些，各种垂直和水平布局的组合，我们最后再分析。
4、footer由四个按钮组成：首页、工作、人脉、个人，这四个按钮是水平布局，未点击为灰色，点击后变成蓝色(其实就是两套图片，被选中后切换另外一套)。
另外，关于底部导航栏官方有对应的tabbar模块的，直接调用就可以，因为我基础太差了，我就索性当练习div+css布局吧。
预备知识：
垂直盒子模型。大体意思是：父元素设置垂直盒子模型，各个子元素设置所占比例。下面这个例子中，header：main：footer = 1 : 2 : 3
html:
<div id = 'wrap'>
<div id='header'></div>
<div id='main'></div>
<div id='footer'></div>
</div>
复制代码
css:
#wrap{ // 父元素，包裹着三个子元素
display:-webkit-box; // 开启盒子模型
-webkit-box-orient:vertical; // 设置为垂直盒子模型，默认为水平
}
#header{ // 子元素1
-webkit-box-flex:1; // 在父元素容器中，占一份
}
#main{ // 子元素2
-webkit-box-flex:2; // 在父元素容器中，占两份
}
#footer{ // 子元素3
-webkit-box-flex:3; // 在父元素容器中，占三份
}
复制代码
进入正题：
由分析1我们知道：由垂直布局的三块组成，header和footer高度固定，main占满剩余部分，我们先写出框架：
index.html
<body>
<div id="wrap"> //最外层框架，包裹着里面三个小框架
<div id="header"></div> //顶部框架
<div id="main"></div> //主体框架
<div id="footer"></div> //底部框架
</div>
</body>
复制代码
main.css
html,body{height: 100%} // 将父元素设置高度百分百，其子元素wrap的百分百参数才能生效
#wrap{ // body的子元素，继承了父亲body的height:100%属性
height: 100%; // 因高度100%,这个wrap元素将充满页面
display: -webkit-box; // 盒子显示模式
-webkit-box-orient: vertical; // 盒子排列为垂直方向
text-align:center; //内部居中显示
}
#header{ // 顶部框架
text-align: center; // 中间显示
background-color: #81a9c3; // 背景颜色：蓝色
color: #fff; // 文字颜色
width: 100%; // 宽度占满屏幕
height:2.8125em; // 设置高度。注意：脉脉的代码，是在#header中又嵌入了个div，设置div的高度，其实一个意思
#main{
-webkit-box-flex: 1; // 高度占页面比例为100%，前提是去掉#header和#footer的高度后，因此无需设置高度。
width:100%; // 宽度占满屏幕
}
#footer{
height: 50px; // 高度
line-height: 20px; // 行高，#footer会有两行，第一行是图标，第二行是文字，这里设置这两行的间距
width: 100%; // 宽度占满屏幕
text-align: center; // 居中显示
}
复制代码
这样写就差不多啦，已经搞定了首页的龙骨，对比脉脉的源码你会发现，我这里的代码和它并不完全相同，不过大体意思一样。下面的工作就是分别搞定header、main、footer这三块。
下一篇咱们先搞定 footer，follow me。。。。。