头部

用法

示例

HTML

<div class="baie-headbar">

    <a class="baie-headbar__hd" href="javascript:history.back(-1);">
        <i class="iconfont icon-return"></i>
    </a>

    <div class="baie-headbar__bd">购物车</div>

    <div class="baie-headbar__ft">编辑全部</div>
</div>

CSS

.baie-headbar {
    position: relative;
    z-index: 10;
    padding: 0 1.6rem;
    height: .88rem;
    line-height: .88rem;
    color: #161616;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e4e4e4;
}
.baie-headbar__hd {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    padding: 0 .24rem;
    height: 100%;
    text-align: center;
}
.baie-headbar__hd i {
    width: .36rem;
    height: .36rem;
}
.baie-headbar__bd {
    font-size: .36rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.baie-headbar__ft {
    position: absolute;
    top:0;
    bottom: 0;
    right: 0;
    padding: 0 .24rem;
    font-size: .32rem;
    text-align: center;
}