物化 CSS | 页脚

物化 CSS 是一款基于Material Design设计规范的开源CSS框架。它提供了各种预定义的CSS类和组件，用于快速而美观的构建现代Web应用程序。本文将介绍如何使用物化 CSS 中的页脚组件。

物化 CSS 页脚

物化 CSS 提供了两种不同的页脚风格：有吸附页脚和无吸附页脚。有吸附页脚会始终显示在视图底部，并且内容会在页脚上垫高。无吸附页脚则只出现在页面的结尾。

有吸附页脚

有吸附页脚适合需要在屏幕顶部和底部之间显示大量内容的应用程序。您可以使用 fixed-action-btn 类创建一个居中的浮动按钮，该按钮可以用于显示更多操作。

代码示例：

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col s12">
        <h5 class="white-text">页脚</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">关于我们</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">联系方式</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">加入我们</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">add</i>
    </a>
  </div>
</footer>

效果图：

无吸附页脚

无吸附页脚适合只需要向用户显示有关数据来源或服务提供者的简单文本的应用程序。您可以使用 page-footer 类创建一个基本的页脚。

代码示例：

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">关于我们</h5>
        <p class="grey-text text-lighten-4">我们是一群...</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">联系我们</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">知识中心</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">博客</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">加入我们</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    版权所有&copy; 物化 CSS 2021
    <a class="grey-text text-lighten-4 right" href="#!">隐私政策</a>
  </div>
</footer>

效果图：

结论

物化 CSS 是建立现代Web应用程序的强大工具，并且页脚组件可以帮助您轻松地为您的应用程序添加一些额外的信息和功能。在使用物化 CSS 时，请确保您遵循Material Design设计规范中的指导，以确保您的用户体验一致和细致。