手机版通用响应式顶部

分享一个手机通用顶部样式，你可以自定义方法封装标题和左右按钮。

淘建站为您提供更多_手机特效_导航菜单_顶部_手机，在此特别感谢您对我们的支持与厚爱！

HTML

<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<header id="header" class="u-header clearfix">
    <div class="u-hd-left">
        <a href="javascript:void(0)" id="btn_goback" class="J_backToPrev" onclick="history.go(-1)"><span class="u-icon-px i-hd-back"></span></a>
    </div>
    <div class="u-hd-tit"><span id="tit_big">标题</span></div>
    <div class="u-hd-right"><a href="/"><span class="u-icon-px i-hd-home"></span></a></div>
</header>

CSS

.u-header{background: #fbfbfa none repeat scroll 0 0; font-size: 18px; height: 44px; line-height: 44px; padding: 0; position: relative; text-align: center; width: 100%; z-index: 110;} .u-header::before{border-bottom: 1px solid #dedede; bottom: -1px; content: ""; left: 0; pointer-events: none; position: absolute; right: 0;} .u-hd-right{float:right} .u-hd-left{float:left} .u-hd-left a, .u-hd-right a{display: block; padding: 0 10px 10px;} .u-icon-px{background: url("icon_sprite.png") no-repeat scroll 0 0 / 225px auto; display: inline-block;} .u-hd-tit{height: 0.88rem; left: 0; pointer-events: none; position: absolute; text-align: center; top: 0; width: 100%;}