手机版通用响应式顶部

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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