`
薇拉Rachel
  • 浏览: 13293 次
文章分类
社区版块
存档分类
最新评论

新手教程 | 《从0开始写“脉脉”（1）》·首页布局分析

新手教程 
阅读更多
最近很多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......
0
顶
0
踩
分享到：
| APICloud率先适配iOS 11，以及APP开发者需 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics