手机版通用响应式顶部

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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