• 页脚
    • 样式一
    • 样式二
    • 样式三

    页脚

    页脚主要用于在页面底部显示相关版权信息和相关链接等。

    WeUI 提供的页脚主要有三种样式。

    样式一

    只有一行文字,无链接。

    1. <div class="weui-footer">
    2. <p class="weui-footer__text">Copyright © 2016 Paranoid_K</p>
    3. </div>

    页脚 - 图1

    样式二

    一行文字和一个链接。

    1. <div class="weui-footer">
    2. <p class="weui-footer__links">
    3. <a href="#" class="weui-footer__link">底部链接</a>
    4. </p>
    5. <p class="weui-footer__text">Copyright © 2016 Paranoid_K</p>
    6. </div>

    页脚 - 图2

    样式三

    一行文字和多个链接,链接数建议不要过多,以免影响页面美观度。

    1. <div class="weui-footer">
    2. <p class="weui-footer__links">
    3. <a href="#" class="weui-footer__link">底部链接</a>
    4. <a href="#" class="weui-footer__link">底部链接</a>
    5. </p>
    6. <p class="weui-footer__text">Copyright © 2016 Paranoid_K</p>
    7. </div>

    页脚 - 图3

    如果页面内容不足以撑起整个屏幕高度,又想让页脚在屏幕最底部,可以添加一个 weui-footer_fixed-bottom 样式类使页脚固定在屏幕底部。

    1. <div class="weui-footer weui-footer_fixed-bottom">
    2. <p class="weui-footer__links">
    3. <a href="#" class="weui-footer__link">底部链接</a>
    4. </p>
    5. <p class="weui-footer__text">Copyright © 2016 Paranoid_K</p>
    6. </div>