页脚

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

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>