目录
一、搜索框样图
二、思路分析
1、结构分析：
每个部分有哪些内容组成，每个内容用什么标记书写。
2、样式分析：
重点确定什么样的布局（本次使用flex弹性布局完成）,其次为各部分添加样式.
三、代码
1、结构部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="header">
<span id="btn"></span>
<div class="content">
<span id="jdlogo"></span>
<span id="fdj"></span>
<input type="text" />
</div>
<a href="">登录</a>
</div>
</body>
</html>
2、样式部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
height: 50px;
background-color: #e43130;
display: flex;
justify-content: space-around;
align-items: center;
}
#btn{
width: 24px;
height: 24px;
background:url(img/下载.png) no-repeat ;
background-size: 24px;
}
.content{
background-color: white;
height: 37px;
border-radius: 15px;
flex: 0.94;
/*添加flex后,jd图标显示,不添加不显示，待解决*/
display: flex;
align-items: center;
}
#jdlogo{
width: 37px;
height: 21px;
/*遮挡问题待解决*/
background: url(img/jd-sprites.png) no-repeat 13px 3px;
background-size: 200px;
border-right: solid 2px #CCCCCC;
}
#fdj{
width: 23px;
height: 30px;
background: url(img/jd-sprites.png) no-repeat -79px 8px ;
background-size:200px ;
}
a{
color: white;
text-decoration: none;
}
input{
outline: none;
border: none;
}
</style>
3、效果图：
四、难点解析
1、主内容部分：
（1）align-items：即设置子元素在主轴上居中排列
（2）flex：设置子项目占据多少分配空间，因为#btn和超链接a占据了一定的位置，所以flex设置0.94，就导致主内容占据剩余内容的百分之九十四。
.content{
background-color: white;
height: 37px;
border-radius: 15px;
flex: 0.94;
/*添加flex后,jd图标显示,不添加不显示，待解决*/
display: flex;
align-items: center;
}
如果对代码还有其余问题，欢迎评论留言