新手脉脉教程精要.docx

声明：我是新手，基础基本为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: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.htmlbody? ?? ???div id=wrap? ?? ?? ?? ?? ?? ?? ?? ?//最外层框架，包裹着里面三个小框架? ?? ?? ?? ?? ? div id=header/div //顶部框架? ?? ?? ?? ?? ? div id=main/div? ? //主体框架? ?? ?? ?? ?? ? div id=footer/div??//底部框架? ?? ???/div/body复制代码main.csshtml,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;? ?