开发者学堂课程【移动 Web 前端开发：首页-顶部搜索的内容版心】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8403
首页-顶部搜索的内容版心
一、顶部搜索的内容版心介绍
页面搭建起来后需要添加内容，内容包括以下4个部分：
1.搜索
2.轮播图
3.导航栏
4.商品
在版心容器里设置四个区域：
l 顶部搜索
l 轮播图
l 导航栏
l 产品区块
页面结构完成，首先实现顶部搜索。
顶部搜索特点：左右两边固定，中间搜索框是自适应容器。
要求是在流式布局中让搜索框达到自适应。
先实现容器，在进行滚动的时候是一直浮动在顶部的，所以是固定定位容器。
顶部搜索模块：
.jd search{
position: fixed;
width: 100%;
height: 40px;
background:#d8505c;
position：relative；
}
这里虽然给做了定位但是没有写 left：0；top：0。带来的是基于原来的位置来显示。
这时候是基于浏览器的宽度来显示。
让顶部搜索框居中显示方法是再加一个容器。
现在版心容器是在 <body> 里，在通然的布局里 <header> 再写入一个版心容器：
这时候布局已经完成。
顶部搜索由两个按钮和一个搜索框和一个小图标组成，所以列出结构：
<a href="#” class="icon_logo">
登录
整个搜索栏结构完成。
接下来把内容版心做好：
.jd_search .jd_search_box{ }
.jd_search .jd_search_box a{ }
.jd_search .jd_search_box .icon_logo{ }
.jd_search .jd_search_box .login{ }
.jd_search .jd_search_box form{ }
.jd_search .jd_search_box form input{ }
.jd search .jd search_box form .icon_search{ }
关于顶部搜索所有的选择器准备完成。
现在需要一个和上一个版心容器一样功能的容器：
.jd_search .jd_search_box {
width: 100%;
height: 40px;
max-width: 640px;
min-width: 320px;
margin: o auto;
background: #d8505c;
}
这个容器现在就变成了居中自适应的容器了。
