apicloud apicloud

注册
查看: 72376|回复: 69

[新手教程] 从0开始写"脉脉"(一) —— 首页布局分析

 

主题:
28
帖子:
88
云币:
757

[新手教程] 从0开始写"脉脉"(一) —— 首页布局分析

 
72376 69 | 发表于 2014-10-28 21:47:35 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:40 编辑

》》更多视频教程请关注 www.9y.cm《《


声明:
我是新手,基础基本为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. <div id = 'wrap'>
  2.         <div id='header'></div>
  3.         <div id='main'></div>
  4.         <div id='footer'></div>
  5. </div>
复制代码
css:
  1. #wrap{                                               // 父元素,包裹着三个子元素
  2.         display:-webkit-box;                 // 开启盒子模型
  3.         -webkit-box-orient:vertical;     // 设置为垂直盒子模型,默认为水平
  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. <body>
  2.         <div id="wrap">                        //最外层框架,包裹着里面三个小框架
  3.                 <div id="header"></div> //顶部框架
  4.                 <div id="main"></div>    //主体框架
  5.                 <div id="footer"></div>  //底部框架
  6.         </div>
  7. </body>
复制代码
main.css
  1. html,body{height: 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. #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。。。。。

文章导航:
从0开始写"脉脉"(一) —— 首页布局分析
从0开始写"脉脉"(二) —— 底部导航栏
从0开始写"脉脉"(三) —— 顶部导航栏
从0开始写"脉脉"(四) —— 再谈顶部导航栏
从0开始写"脉脉"(五) —— 内容页


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

驾校小白

UID:1722

主题:
1
帖子:
16
云币:
3
发表于 2014-11-7 12:37:45 |
新手学习的好教程

驾校小白

UID:5529

主题:
1
帖子:
16
云币:
33
发表于 2014-10-29 08:33:06 |
非常有用,谢谢分享!

主题:
18
帖子:
612
云币:
366
发表于 2014-10-29 10:17:41 |
  长篇  连载   赶紧 更新啊  在线等

主题:
1
帖子:
2
云币:
2
发表于 2014-10-29 10:27:22 |
这个得顶啊,强烈支持!

主题:
1
帖子:
3
云币:
2
发表于 2014-10-29 12:29:40 |
先Mark一下。我也是0基础,前来学习!感谢楼主!

新手上路

UID:2003

主题:
2
帖子:
8
云币:
7
发表于 2014-10-29 14:13:23 |
这个不顶不行!

驾校小白

UID:3417

主题:
10
帖子:
49
云币:
119

APICloud粉丝APICloud毕业勋章

发表于 2014-10-30 09:02:41 |
支持一下。
如果你非要喊我“老湿”,请不要在后面加个“了”。
APICloud济南交流群:415691662

主题:
0
帖子:
11
云币:
56
发表于 2014-11-4 14:57:33 |
不错,对于我们这种小白很好的入门

主题:
6
帖子:
45
云币:
3790
发表于 2014-11-6 17:26:10 |
哈哈,就应该这样,要不怎么下手
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表