工具栏

用法

示例

HTML

//竖向排列
<div class="baie-toolbar">
    <a href="javascript:;" class="baie-toolbar__item active">
        <p class="baie-toolbar_label">微信</p>
    </a>
    <a href="javascript:;" class="baie-toolbar__item">
        <p class="baie-toolbar_label">通讯录</p>
    </a>
    <a href="javascript:;" class="baie-toolbar__item">
        <p class="baie-toolbar_label">发现</p>
    </a>
    <a href="javascript:;" class="baie-toolbar__item">
        <p class="baie-toolbar_label">我</p>
    </a>
</div>

//横向排列
<div class="baie-toolbar">
...同上
</div>

CSS

.baie-toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: #f7f7fa;
}
.baie-toolbar:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #C0BFC4;
    color: #C0BFC4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.baie-toolbar__item {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: .14rem 0 .14rem;
    font-size: 0;
    color: #999;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.baie-toolbar__item:before {
    content: '';
    display: inline-block;
    width: .36rem;
    height: .36rem;
    background-image: url("../images/icon_tabbar_bg.png");
    background-repeat: no-repeat;
    background-size: .76rem;
}
.baie-toolbar__item:nth-child(1):before {
    background-position: .06rem .02rem;
}
.baie-toolbar__item:nth-child(2):before {
    background-position: 0 -.38rem;
}
.baie-toolbar__item:nth-child(3):before {
    background-position: 0 -.78rem;
}
.baie-toolbar__item:nth-child(4):before {
    background-position: 0 -1.20rem;
}
.baie-toolbar__item.active {
    color: #eb5403;
}
.baie-toolbar__item:nth-child(1).active:before {
    background-position: -.40rem .02rem;
}
.baie-toolbar__item:nth-child(2).active:before {
    background-position: -.40rem -.38rem;
}
.baie-toolbar__item:nth-child(3).active:before {
    background-position: -.40rem -.78rem;
}
.baie-toolbar__item:nth-child(4).active:before {
    background-position: -.40rem -1.20rem;
}
.baie-toolbar_label {
    margin-top: .10rem;
    font-size: .24rem;
    line-height: .24rem;
}
.baie-toolbar_h .baie-toolbar__item { /* 横向样式改写 start*/
    padding: .14rem 0 .14rem;
}
.baie-toolbar_h .baie-toolbar__item:before {
    display: inline-block;
    vertical-align: middle;
}
.baie-toolbar_h .baie-toolbar_label {
    margin:0 0 0 .06rem;
    display: inline-block;
    vertical-align: middle;
}