CSS手机端顶部标题栏样式(三分天下)

先上一下效果图:

《CSS手机端顶部标题栏样式(三分天下)》

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;
}

 

 

    原文作者:幕尘风
    原文地址: https://blog.csdn.net/qq15577969/article/details/103763126
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞