开发者学堂课程【移动 Web 前端开发:首页-顶部搜索的自适应布局】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8404
首页-顶部搜索的自适应布局
一、顶部搜索的自适应布局介绍
顶部搜索的自适应布局:两侧固定,中间自适应的布局,也叫做双飞翼。
固定两侧:
.jd_search .jd_search_box a{
position: absolute;
top: o;
}
两侧按钮:
L
ogo:
.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:
30
px
然后在搜索框内还有一个搜索按钮:
.jd_search .jd_search_box form .icon_search{
width: 20px;
height: 20px;
background: blue;
position: absolute;
rleft: 65px;
top: 10px;