APICloud 社区从0开始写“脉脉”(四)

本帖最后由老邮局于 2015-7-23 20:43 编辑

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

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

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

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

1、整体布局

1 <div id="header_jobs" style="display:-webkit-box; -webkit-box-orient:vertical; height:75px">
2 <ul class="flex1"></ul> // 蓝色部分
3 <ul style="background-color: #f0f0f0;height: 30px;line-height: 30px"></ul> // 灰色部分
4 </div>

复制代码

行1：定义了垂直盒子模型，定义了整体高度是75px；

行2：定义蓝色部分占用除白色部分高度外的百分百。

行3：定义灰色部分的高是30px；

记得我们在第一篇中定义了header的高度是2.8125em(45px),这里灰色部分我们给它30px；那么蓝色部分是45px，保持和其他窗口组对应的header同高。

2、蓝色部分布局

html：

1 <ul class="flex1">
2 <li style="-webkit-box-flex:5;" onclick="opacity(this)">
3 <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()"/> // 文本输入框
4 <span class="search-advertise" id="search-advertise1"></span> // 搜索图标
5 </li>
6
7 <li style="width: 60px" class="add-publish" tapmode="" onclick="openPicture()"> // 图标按钮
8 </li>
9 </ul>

复制代码

css:

ul {
width: 100%;
list-style: none;
display: -webkit-box; //水平盒子模型
display: box;
}

复制代码

蓝色部分分为左右两块，对应html中的两个li标签，我们在css中配置ul标签开启水平盒子模型，其子元素li就会水平排列。右侧的图标按钮占用60px宽度，剩下的给左侧的搜索框。

右侧：图标按钮作为背景不忘记设置其只显示一次、垂直水平居中，第三篇有说过。

左侧：需要重点说明，它由一个文本框和一个位于它左侧的搜索图标组成（行3、4）。

.search-input { // 文本框
margin-left: 7px; // 边框左侧距离屏幕7px
width: 90%; // 整体宽度占屏幕90%
height: 30px; // 高度30px
border: 0; // 无边框
border-radius: 13px; // 圆角
background: #0070B9; // 背景颜色
/*去除系统默认的样式*/
-webkit-appearance: none;
outline: #ffffff;
}
.search-inputActive{ // 配合tapmode,按下时触发该样式，抬起时取消该样式
background-color: #013B62;
}
.search-advertise { // 搜索图标
background-size: 26px; // 图标大小
position: absolute; // 绝对定位，相对于父元素
left: 8px; // 左侧距父元素8px
top: 11px; // 顶部距父元素11px
width: 30px; // 搜索图标所在框框的宽和高
height: 30px;
background-image: url("./image/btn_search_bg.png"); // 加载图片
background-repeat: no-repeat no-repeat; // 只显示一次
}

复制代码

这里说明一点的是，搜索图标的left属性就算设成0，也不会紧靠着屏幕，总是有那么几px的距离。

3、灰色部分布局

<ul style="background-color: #f0f0f0;height: 30px;line-height: 30px"> // ul我们设置了它为水平盒子模型
<li tapmode="" onclick="slderbar('jobsGroup',0)" class="flex2" style="color: #000;text-align: center;border-right: 1px solid #fff"> // 第一个文本标签，与第二个标签比例相同
看职位
</li>
<li tapmode="" onclick="slderbar('jobsGroup',1)" class="flex2" style="color: #000;text-align: center"> // 第二个文本标签，与第一个标签比例相同
招人才
</li>
</ul>

复制代码

4、补充

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

我们为了文字不会和搜索图标重合，需要额外加一个属性。
html

<input type="text" class="search-input" placeholder="搜毛豆..."/>

复制代码

css

.search-input{
padding-left: 36px; // 需要加入这个属性，内边框左侧距离
。。。。。。

复制代码

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

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。