移动端头部导航栏

实现样式

简述：书写移动端头部样式的时候，可以将头部包裹在一个大盒子里面。
不要给大盒子设置padding。给左右盒子分别设置，左边的盒子设置宽度，左右的padding。右边的盒子设置宽高，如果是占满剩余盒子的话，可以设置为flex:1。用大盒子的高度，减去右边盒子的高度除以2就是margin，设置margin把盒子挤到中间。中间的文本可以设置line-height让他们处于居中。

代码如下：
这里的rem根据的html的font-size大小是37.5px

<div class="top">
	<div class="top-left">
		<i class="iconfont icon-zuojiantou"></i>
	</div>
	<div class="top-right">
		<i class="iconfont icon-sousuo"></i>
		<input type="text" placeholder="请输入内容">
	</div>
</div>

.top {
  display: flex;
  width: 100%;
  line-height: 1.333rem;
}

.top .top-left {
  padding: 0 .4rem;
}

.top .top-right {
  width: 8rem;
  height: 0.71rem;
  margin: .33rem 0;
  color: #999;
  background-color: #fff;
  line-height: 0.69rem;
  font-size: 0.47rem;
  border-radius: 30px;
  padding: 0 .3rem;
}

.top .top-right input {
  outline: none;
  border: 0;
  width: 7rem;
}

.top .iconfont {
  font-size: 0.47rem;
}