最近很多app开发小白给柚子君留言，希望能推出一些新手教学类的干货知识。
为了满足小伙伴们的要求，柚子君专门为各位小白，整理了一系列新手教学贴，而整理出的这些干货，柚子君后续会一一分享给各位。
那么咱们今天先来看一下，APICloud官方论坛大神版主“老邮局”的这篇干货《从0开始写“脉脉”（1）· 首页布局分析》。
柚子君温馨提示：不是“陌（mo）陌（mo）”，是脉（mai）脉（mai）~
其实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:
<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; // 在父元素容器中，占三份
}
复制代码
进入正题，由分析我们可知，垂直布局的三块组成中，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这三块，咱们下篇再说 follow me......
分享到：
相关推荐
【使用APICloud从0开始写脉脉(二) 底部导航栏】的知识点解析： 1. **底部导航栏设计**： - 底部导航栏是移动应用中的常见组件，通常包含多个可点击的按钮，用于快速切换不同的功能模块。 - 脉脉的底部导航栏具有...
### 使用APICloud从零开始构建“脉脉”应用（四）：深入解析顶部导航栏设计与实现 #### 概述 本篇文章将继续探讨在使用APICloud进行移动应用开发时，如何从零开始构建一个类似“脉脉”的应用程序，并特别聚焦于...
"脉脉标签布局"是一个特定的布局方案，模仿了知名职业社交应用脉脉中的个人标签展示方式。这个布局的主要特点是TextView的自适应功能，它可以根据内容自动换行，以适应不同的屏幕尺寸和文本长度，同时保持界面的整洁...
【脉脉和赤兔竞品分析】 脉脉与赤兔是中国市场上两款主要的职场社交应用，它们都旨在为用户提供一个专业交流的平台。然而，两者在产品定位、市场表现、功能设计以及商业化策略上存在显著差异。 1. 产品介绍： - ...
脉脉的高级搜索标签，职位分类大全。 分类规则：顶级行业名称-->细分行业名称-->职业方向 - 金融业->银行业->（银行柜员、销售、理财经理/顾问、保险代理人、信贷业务、财务/审计/税务、基金经理、技术/研发、人力...
1. **竞品分析的定义和目的**： - 竞品分析源自经济学领域，是对现有或潜在竞争对手产品的优缺点进行评估，以指导产品战略。简而言之，竞品分析是根据特定目标，选取合适的角度，对比分析竞争对手，找出彼此的强项...
《2020脉脉招聘中高端人才趋势蓝宝书》是一份由中国领先的职业社交平台脉脉发布的报告，这份报告聚焦于2020年招聘市场上中高端人才的流动趋势、薪资分布、行业偏好等方面的数据和分析。尽管无法直接获取该报告的具体...
【产品分析报告】\n\n在传统职场社交环境中，脉脉凭借其独特的功能设计和市场策略，成功在竞争激烈的行业中脱颖而出。这份报告深入探讨了脉脉如何在职场社交领域独领风骚。\n\n首先，从产品功能架构来看，脉脉主要由...
《脉脉-2019营销人才洞察报告》是一份深度剖析营销行业的专业报告，它为我们揭示了2019年中国营销人才的特征、现状及其发展趋势。报告通过详实的数据和深入的分析，为理解营销行业的现状提供了宝贵的参考。 首先，...
【标题】"ios-高仿脉脉、网易圈圈垂直缩放效果.zip"涉及的核心知识点是iOS应用开发中的用户界面动态效果实现，具体是模仿脉脉和网易圈圈App的垂直方向上的视图缩放效果。这个效果通常用于创建具有视觉吸引力的分段...
产品分析 脉脉——领跑的职场社交独角兽.pdf
脉脉作为国内知名的职业社交平台，其发布的相关报告可能基于平台用户的互动数据和招聘信息进行分析。 接下来，基于这些信息，我们可以假设报告可能涉及以下知识点： 1. 人才定义与分类：报告可能会对“人才”进行...
【产品分析报告 - 传统职场社交环境下，脉脉如何独领风骚】 脉脉作为一款在传统职场社交环境中脱颖而出的应用，其成功在于精准地捕捉到了中国职场用户的需求，并提供了相应功能和服务。产品功能架构主要分为五个...
1_脉脉 人才流动与迁徙2022.pdf
- **一线城市依然受青睐**：根据脉脉数据研究院的研究，北京、上海、深圳、广州和杭州是毕业生最热门的就业城市，短期内这种格局难以发生重大改变。 - **北方城市的新亮点**：青岛作为北方城市中的亮点之一，吸引了...
2018数字经济人才流动报告-信通院 脉脉.pdf