apicloud apicloud

注册
  • 开发讨论
  • Studio3
  • AVM多端
  • BUG与建议
  • 分享区
  • 积分签到
    • 1234567下一页
    发新帖
    查看: 73588|回复: 69

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

     

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

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

     
    73588 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开始写"脉脉"(五) —— 内容页


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

    收藏收藏79
    分享到:微信新浪微博QQ空间
    acvip

    驾校小白

    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基础，前来学习！感谢楼主！
    SFidea

    新手上路

    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 |
    哈哈，就应该这样，要不怎么下手
    1234567下一页
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

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