使用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 : 3html:1. 2. 3. 4. 5. 复制代码css:1. #wrap / 父元素，包裹着三个子元素2. display:-webkit-box; / 开启盒子模型3. -webkit-box-orient:vertical; / 设置为垂直盒子模型，默认为水平4. 5. #header / 子元素16. -webkit-box-flex:1; / 在父元素容器中，占一份7. 8. #main / 子元素29. -webkit-box-flex:2; / 在父元素容器中，占两份10. 11. #footer / 子元素312. -webkit-box-flex:3; / 在父元素容器中，占三份13. 复制代码进入正题： 由分析1我们知道：由垂直布局的三块组成，header和footer高度固定，main占满剩余部分，我们先写出框架：index.html1. 2. /最外层框架，包裹着里面三个小框架3. /顶部框架4. /主体框架5. /底部框架6. 7. 复制代码main.css1. html,bodyheight: 100% / 将父元素设置高度百分百，其子元素wrap的百分百参数才能生效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. #main15. -webkit-box-flex: 1; / 高度占页面比例为100%，前提是去掉#header和#footer的高度后，因此无需设置高度。16. width:100%; / 宽度占满屏幕17. 18. #footer19. height: 50px; / 高度20. line-height: 20px; / 行高，#footer会有两行，第一行是图标，第二行是文字，这里设置这两行的间距21. width: 100%; / 宽度占满屏幕22. text-align: center; / 居中显示23. 复制代码这样写就差不多啦，已经搞定了首页的龙骨，对比脉脉的源码