使用APICloud从0开始写脉脉(一)首页布局分析.doc

声明：我是新手，基础基本为0，此文只是分享读书心得，高手勿喷....。其实UI界面就是div+css布局，那我们来分析下“脉脉”的首页界面布局：

  1、首页分成了上、中、下三块：header(粉红色)、main(绿色)、footer(黄色)，这三块是垂直布局的，并且header和footer的高度是固定的，而main的高度将占满窗口剩余部分。
  2、header分为四个部分：左右各一个按钮、中间两个文本标签(下面有个滑块，它会根据选择动态改变位置)。
  3、main布局复杂些，各种垂直和水平布局的组合，我们最后再分析。
  4、footer由四个按钮组成：首页工作、人脉、个人，这四个按钮是水平布局，未点击为灰色，点击后变成蓝色(其实就是两套图片，被选中后切换另外一套)。    

        另外，关于底部导航栏官方有对应的tabbar模块的，直接调用就可以，因为我基础太差了，我就索性当练习div+css布局吧。

预备知识：
垂直盒子模型。大体意思是：父元素设置垂直盒子模型，各个子元素设置所占比例。下面这个例子中，header：main：footer = 1 : 2 : 3
html:

1.
3.         
4. }

5. #header{                                           // 子元素1 

6.         -webkit-box-flex:1;                   // 在父元素容器中，占一份

7. }

8. #main{                                              // 子元素2

9.         -webkit-box-flex:2;                   // 在父元素容器中，占两份

10. }

11. #footer{                                            // 子元素3

12.         -webkit-box-flex:3;                  // 在父元素容器中，占三份

13. }
复制代码

进入正题：
      由分析1我们知道：由垂直布局的三块组成，header和footer高度固定，main占满剩余部分，我们先写出框架：
index.html
1.

2.         包裹着里面三个小框架

3.                 能生效

2. #wrap{                                                // body的子元素，继承了父亲body的height:100%属性 

3.         height: 100%;                             // 因高度100%,这个wrap元素将充满页面

4.         display: -webkit-box;                 // 盒子显示模式

5.         -webkit-box-orient: vertical;     // 盒子排列为垂直方向

6.          text-align:center;                      //内部居中显示

7. }

8. #header{                                            // 顶部框架

9.         text-align: center;                      // 中间显示

10.         background-color: #81a9c3;    // 背景颜色：蓝色

11.         color: #fff;                                  // 文字颜色

12.         width: 100%;                              // 宽度占满屏幕

13.         height:2.8125em;                       // 设置高度。注意：脉脉的代码，是在#header中又嵌入了个div，设置div的高度，其实一个意思

14. #main{

15.         -webkit-box-flex: 1;                   // 高度占页面比例为100%，前提是去掉#header和#footer的高度后，因此无需设置高度。

16.         width:100%;                               // 宽度占满屏幕

17. }

18. #footer{

19.         height: 50px;                              // 高度

20.         line-height: 20px;                      // 行高，#footer会有两行，第一行是图标，第二行是文字，这里设置这两行的间距

21.         width: 100%;                              // 宽度占满屏幕

22.         text-align: center;                      // 居中显示

23. }
复制代码

这样写就差不多啦，已经搞定了首页的龙骨，对比脉脉的源码你会发现，我这里的代码和它并不完全相同，不过大体意思一样。下面的工作就是分别搞定header、main、footer这三块。
下一篇咱们先搞定 footer，follow me。。。。。