开发者学堂课程【移动 Web 前端开发：首页-顶部搜索的自适应布局】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8404
首页-顶部搜索的自适应布局
一、顶部搜索的自适应布局介绍
顶部搜索的自适应布局：两侧固定，中间自适应的布局，也叫做双飞翼。
固定两侧：
.jd_search .jd_search_box a{
position: absolute;
top: o;
}
两侧按钮：
Logo：
.jd_search .jd_search_box .icon_logo{
width: 60px;
height: 40px;
background: black;
}
登录按钮：
.jd_search .jd_search_box .login{
width: 5opx;
height: 40px;
text-align: center;
line-height: 40px;
color: #fff;
}
现在让中间内容自适应，要求自适应还要不能够遮住两边按钮：
.jd_search .jd_search_box form{
width: 100%;
}
这时候 from 铺满整行，让 from 里的内容不影响两侧按钮方法是：
现在的格子都是以边框开始计算宽度的，比如写入：
padding-left: 60px;
padding-right: 50px;
这时候两边各空出了一个 logo 和登陆区域，里面的 input 是根据 from 内容做的百分比，也就是说百分比是基于父元素的内容宽度和高度，所以：
.jd_search .jd_search_box form input{
width: 100%;
}
这时，内容就是个自适应了。
给 input 加上样式：
height: 30px;
border-radius: 15px;
margin-top: 5px;
padding-left:30px
然后在搜索框内还有一个搜索按钮：
.jd_search .jd_search_box form .icon_search{
width: 20px;
height: 20px;
background: blue;
position: absolute;
rleft: 65px;
top: 10px;
