开发者学堂课程【移动 Web 前端开发：分类页-顶部通栏 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8429
分类页-顶部通栏
内容介绍
一、结构范例
二、样式范例
一、 结构范例
第一个模块，在这个模块中没有最大最小宽度的限制，就可以直接在里面增加内容。这个模块中包含了三个内容，搜索框，返回按钮和菜单按钮，是双飞翼布局。
按钮可以点击，所以用 a 表示
<header class="jd_topBar">
<a href="#"class="icon_back"</a>//表示返回按钮
<form action="#">
<input type="search”placeholder="肥羊"/>//表示中间的搜索栏
</form>
<a href="#"class="icon_menu"</a>//表示菜单按钮
</header>
以上是结构，包括两个按钮和输入框。新增双飞翼布局需要把搜索栏设置固定宽度并且进行定位，设置左右 padding ，把 设置宽度100%。
二、样式范例
在 category.css 中书写样式
设置顶部通栏样式，顶部通栏的模块前缀为 jd
.jd_topBar{
width:100%;
}
.jd_topBar a{} 表示有共同的样式
.jd_topBar .icon_back{}表示除了共同的样式，有不同的样式。
.jd_topBar .icon_menu{}
.jd_topBar form{}表示与其对应的 form
.jd_topBar .form input{} form 中的 input
以上是内容总体结构，对内容结构进行样式完善。
.jd_topBar{//为网页设置背景，背景的大小是2*88PNG，在移动端使用大小为1*44
width:100%;//设置宽度
height:45px;//设置高度
border-bottom:1px solid #ddd;
background: url("../images/header-bg.png") repeat-x;// repeat-x表示设置为水平平铺
background-size:1px 44px;
}//以上是顶部通栏的样式
设置效果如下图：
.jd_topBar a{//a 的样式是两边各占一个正方形大小是44*44，把它们的高度宽度进行调整，调整为宽度是40 px，高度是44 px
width:40px;
height:44px;//高度占满
position:absolute;
top: 0;
padding:12px 10px;//把20px *20px 大小的图放在40 px*44px 的图中并且居中显示，并且把多余的内容裁剪。目前 a 的内容大小是40 px*40 px，把a的大小设置为40 px*40 px，而不是20 px*20 px是因为在移动端20 px*20 px会导致图标过小，不便于点击，灵敏度很低，所以把按钮放大。把a的内容设置小一些，使背景从内容开始评估,使按钮图标居中显示。前提是做出20*20的内容，做出20*20的内容不会影响 a 的大小。把 a 的 padding 设置为12px 10px
background-orgin:content-box//从内容开始评估
background-clip:content-box//删除旁边多余的内容，只留下内容的区域块。
}
以上是 background-orgin 和 background-clip 两个属性的应用场景。
.jd_topBar .icon_back{
left: 0;
background-position：-20px 0;定位返回按钮//因为在 css 的 base 中已经增加了背景图，所以不写也可以看到背景，只需要对其进行定位。
}
.jd_topBar .icon_menu{
right: 0;
background-position: -60px 0;//定位菜单按钮
}
.jd_topBar form{//设置中间的模块
width:100%;
padding:0 40px;// padding 左右40 px上下0
}
.jd_topBar form input{
width:100%;
height: 30px;
border:1px solid #ddd;//设置中间的搜索栏边框
border-radius:2px;//增加圆角
margin-top:7px;//30px 大小在40px 大小的盒子中移动 7px 个位置，使其上下居中显示。
最终效果图：在拉伸时是一个自适应的双飞翼布局
