apicloud apicloud

注册
查看: 16529|回复: 16

[新手教程] 从0开始写"脉脉"(四) —— 再谈顶部导航栏

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

[新手教程] 从0开始写"脉脉"(四) —— 再谈顶部导航栏

16529 16 | 发表于 2014-11-4 22:39:01 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:43 编辑

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


我们再来分析一个顶部导航栏的布局:



有什么特征
1、从大的方面看分为上下两部分:蓝色部分灰色部分
2、蓝色部分,它由三个部件组成(输入框、搜索图标、右侧的图标按钮);布局是水平。搜索图标和输入框可以看成一体,位置在输入框的左侧。
3、灰色部分,它由两个文本标签组成,水平均布、垂直居中。

如何实现:其实就是垂直、水平布局的组合,可以用div一层层套,或者我们用ul和li标签。


组    成
布    局
备    注
整    体
蓝色部分、灰色部分
垂  直
蓝    色
文本框、图片按钮
水  平
input
灰    色
文本标签
水  平


1、整体布局
  1. 1  <div id="header_jobs" style="display:-webkit-box; -webkit-box-orient:vertical; height:75px">
  2. 2          <ul class="flex1"></ul>                                                                                               // 蓝色部分
  3. 3          <ul style="background-color: #f0f0f0;height: 30px;line-height: 30px"></ul>        // 灰色部分
  4. 4  </div>
复制代码
行1:定义了垂直盒子模型,定义了整体高度是75px;
行2:定义蓝色部分占用除白色部分高度外的百分百。
行3:定义灰色部分的高是30px;
记得我们在第一篇中定义了header的高度是2.8125em(45px),这里灰色部分我们给它30px;那么蓝色部分是45px,保持和其他窗口组对应的header同高。

2、蓝色部分布局
html:
  1. 1  <ul class="flex1">
  2. 2          <li style="-webkit-box-flex:5;" onclick="opacity(this)">  
  3. 3                  <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()"/>   // 文本输入框
  4. 4                  <span class="search-advertise" id="search-advertise1"></span>                                                            // 搜索图标
  5. 5          </li>
  6. 6
  7. 7          <li style="width: 60px" class="add-publish" tapmode="" onclick="openPicture()">                                      // 图标按钮
  8. 8          </li>
  9. 9  </ul>
复制代码
css:
  1. ul {
  2.         width: 100%;
  3.         list-style: none;
  4.         display: -webkit-box;  //水平盒子模型
  5.         display: box;
  6.         }
复制代码
蓝色部分分为左右两块,对应html中的两个li标签,我们在css中配置ul标签开启水平盒子模型,其子元素li就会水平排列。右侧的图标按钮占用60px宽度,剩下的给左侧的搜索框。
右侧:图标按钮作为背景不忘记设置其只显示一次、垂直水平居中,第三篇有说过。
左侧:需要重点说明,它由一个文本框和一个位于它左侧的搜索图标组成(行3、4)。
  1. .search-input {                          // 文本框
  2.         margin-left: 7px;                // 边框左侧距离屏幕7px
  3.         width: 90%;                        // 整体宽度占屏幕90%
  4.         height: 30px;                     // 高度30px
  5.         border: 0;                           // 无边框
  6.         border-radius: 13px;         // 圆角
  7.         background: #0070B9;     // 背景颜色
  8.         /*去除系统默认的样式*/
  9.         -webkit-appearance: none;
  10.         outline: #ffffff;
  11.         }
  12.         .search-inputActive{                 // 配合tapmode,按下时触发该样式,抬起时取消该样式
  13.         background-color: #013B62;
  14.         }
  15.         .search-advertise {                     // 搜索图标
  16.         background-size: 26px;    // 图标大小
  17.         position: absolute;            // 绝对定位,相对于父元素
  18.         left: 8px;                             // 左侧距父元素8px
  19.         top: 11px;                           // 顶部距父元素11px
  20.         width: 30px;                       // 搜索图标所在框框的宽和高
  21.         height: 30px;
  22.         background-image: url("./image/btn_search_bg.png");   // 加载图片
  23.         background-repeat: no-repeat no-repeat;                        // 只显示一次
  24.         }
复制代码
这里说明一点的是,搜索图标的left属性就算设成0,也不会紧靠着屏幕,总是有那么几px的距离。

3、灰色部分布局
  1. <ul style="background-color: #f0f0f0;height: 30px;line-height: 30px">    // ul我们设置了它为水平盒子模型
  2.         <li tapmode="" onclick="slderbar('jobsGroup',0)" class="flex2" style="color: #000;text-align: center;border-right: 1px solid #fff">  // 第一个文本标签,与第二个标签比例相同
  3.                 看职位
  4.         </li>
  5.          
  6.         <li tapmode="" onclick="slderbar('jobsGroup',1)" class="flex2" style="color: #000;text-align: center">                                               // 第二个文本标签,与第一个标签比例相同
  7.                 招人才
  8.         </li>
  9. </ul>
复制代码

4、补充

有的时候搜索框里面会有提示文字,例如:

我们为了文字不会和搜索图标重合,需要额外加一个属性。
html
  1. <input type="text" class="search-input" placeholder="搜  毛豆..."/>
复制代码
css
  1. .search-input{
  2.         padding-left: 36px;    // 需要加入这个属性,内边框左侧距离
  3. 。。。。。。
复制代码

我是小白,一个周之前基础为0,通过认真的读源码、不断的动手实践,感觉自己现在思路清楚多了,感觉自己棒棒哒~
只要有心,根本不是问题!


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

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

1

查看全部评分

主题:
18
帖子:
612
云币:
366
发表于 2014-11-4 22:48:56 |
抢沙发

主题:
18
帖子:
612
云币:
366
发表于 2014-11-4 22:49:01 |
抢沙发

主题:
0
帖子:
11
云币:
56
发表于 2014-11-5 10:05:04 |
不错支持

主题:
1102
帖子:
5131
云币:
2147214885

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2014-11-5 10:14:14 |
楼主很给力吗

驾校小白

UID:1722

主题:
1
帖子:
16
云币:
3
发表于 2014-11-7 12:59:41 |

抢沙发,连板凳也抢了,不厚道啊

主题:
4
帖子:
25
云币:
252
发表于 2014-11-8 23:33:58 |
楼主给力,期待更多~~~~~~~~~~~

驾校小白

UID:21945

主题:
1
帖子:
5
云币:
11
发表于 2015-1-16 13:10:53 |
基础为0,厉害!

主题:
8
帖子:
363
云币:
2726

APICloud粉丝

发表于 2015-7-8 18:40:23 |
好东西,赞一下

驾校小白

UID:166352

主题:
0
帖子:
15
云币:
23
发表于 2015-9-26 15:34:29 |
楼主给力,期待更多
12下一页
您需要登录后才可以回帖 登录 | 立即注册

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