页脚

用法

示例

HTML

<div class="baie-footer">
    <p class="baie-footer__links">
        <a href="javascript:;" class="baie-footer__link">底部链接</a>
        <a href="javascript:;" class="baie-footer__link">底部链接</a>
    </p>

    <p class="baie-footer__text">Copyright © 2008-2016 baidu.com</p>
</div>

CSS

.baie-footer {
    color: #838383;
    font-size: .28rem;
    text-align: center;
}
.baie-footer a {
    color: #586C94;
}
.baie-footer_fixed-bottom {
    position: fixed;
    bottom: 0.14rem;
    left: 0;
    right: 0;
}
.baie-footer__links {
    font-size: 0;
}
.baie-footer__link {
    display: inline-block;
    vertical-align: top;
    margin: .17rem;
    position: relative;
    font-size: .28rem;
}
.baie-footer__link:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #C7C7C7;
    color: #C7C7C7;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    left: -.18rem;
    top: .10rem;
    bottom: .10rem;
}
.baie-footer__link:first-child:before {
    display: none;
}
.baie-footer__text {
    padding: 0 .08rem;
    font-size: .24rem;
}