常见页头

常见页头的排版布局:

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码


<header class="ui-header clearfix h8 f46 pl3 pr3 color8 bg-color-success t-c">
	<div class="ui-header-l fl w5">
		<b class="icon iconfont icon-sortlight"></b>
	</div>
	<div class="ui-header-c fl f30 w59">
		快速预览
	</div>
	<div class="ui-header-r fl w5">
		<i class="icon iconfont icon-phone"></i>
	</div>
</header>

<style>
//ui默认定义的样式如下
.ui-header{ line-height:0.8rem;}
.ui-header-l,.ui-header-r{ cursor: pointer;}
</style>