html5手机端顶部标题栏三分样式

效果图：

html代码：

<header>
<!--标题-->
<div class="title-box">
	<a href="./home.html" class="title-left"><i class="iconfont" style="font-size:30px;">&#xe619;</i></a>
    <a class="title-center"><img class="logo" src="../img/logo.png"/></a>
	<a id="menubtn" href="javascript:;" class="title-right"><i class="iconfont" style="font-size:30px;">&#xe606;</i></a>
</div>
</header>

特别说明： iconfont图标使用的是阿里图标库的

css代码：

/*顶部标题栏*/
header{
	width: 100%;
	height: 60px;
	line-height:60px;
	overflow: hidden;
}
.title-box {
	display:flex;
	background: #3F404F;
	font-size:14px;
	padding:0 10px;
}

.title-left{
	text-align: left;
	display:flex;
	justify-content: center;
}

.title-box img.logo{
	margin-top:5px;
	height:50px;
}

.title-right{
	text-align: right;
}

.title-center {
	flex:1;
	text-align: center;
	color: #ffffff;
}