Materialize CSS 框架中 Footer 的使用详解

class Footer

Footer（页脚） 是网页布局的重要组成部分，通常用于展示版权信息、联系信息、网站链接等。Materialize CSS 框架提供了简洁且功能丰富的 Footer 组件，帮助开发者轻松创建响应式且美观的页脚。

本文将详细介绍如何在 Materialize CSS 框架中使用 Footer，包括基本用法、样式定制以及实际应用示例。

1. 基本 Footer 使用

Materialize 的 Footer 组件通过 .footer 类来定义，可以在其内包含各种内容，例如链接、版权信息和社交媒体图标。

示例：基本 Footer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Footer 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .page-footer {
      background-color: #263238; /* 页脚背景颜色 */
      color: #ffffff; /* 页脚文字颜色 */
    }
    .page-footer a {
      color: #ffffff; /* 链接颜色 */
    }
    .page-footer a:hover {
      color: #80deea; /* 链接悬停颜色 */
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>页脚基本示例</h4>
    <p>这是一个基本的页脚示例。</p>
  </div>

  <!-- Footer -->
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col s12 m6">
          <h5 class="white-text">公司名称</h5>
          <p class="grey-text text-lighten-4">公司简介信息，描述业务和服务。</p>
        </div>
        <div class="col s12 m6">
          <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>
            <li><a class="grey-text text-lighten-3" href="#!">联系</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2024 公司名称。所有权利保留。
        <a class="grey-text text-lighten-4 right" href="#!">隐私政策</a>
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

  • .page-footer 类用于定义页脚的基本样式。
  • .container 类用于将内容居中并设置合适的边距。
  • .footer-copyright 类用于定义版权信息区域。

2. 带有社交媒体图标的 Footer

你可以在 Footer 中添加社交媒体图标，提供网站的社交媒体链接。

示例：带有社交媒体图标的 Footer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带有社交媒体图标的 Footer 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .page-footer {
      background-color: #424242;
    }
    .page-footer a {
      color: #ffffff;
    }
    .page-footer a:hover {
      color: #00bcd4;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>带有社交媒体图标的 Footer</h4>
    <p>这是一个带有社交媒体图标的页脚示例。</p>
  </div>

  <!-- Footer -->
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col s12 m6">
          <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>
            <li><a class="grey-text text-lighten-3" href="#!">联系</a></li>
          </ul>
        </div>
        <div class="col s12 m6">
          <h5 class="white-text">社交媒体</h5>
          <a class="btn-floating btn-large social facebook"><i class="material-icons">facebook</i></a>
          <a class="btn-floating btn-large social twitter"><i class="material-icons">twitter</i></a>
          <a class="btn-floating btn-large social linkedin"><i class="material-icons">linkedin</i></a>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2024 公司名称。所有权利保留。
        <a class="grey-text text-lighten-4 right" href="#!">隐私政策</a>
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <style>
    .social {
      background-color: #ffffff;
      margin: 0 5px;
    }
    .social.facebook { background-color: #3b5998; }
    .social.twitter { background-color: #1da1f2; }
    .social.linkedin { background-color: #0077b5; }
  </style>
</body>
</html>

解释：

  • 使用 .btn-floating 和 .material-icons 类创建社交媒体图标。
  • 自定义 .social 类为每个社交媒体图标设置背景颜色。

3. 多列布局的 Footer

如果你需要一个包含更多信息的页脚，可以使用多列布局。

示例：多列布局的 Footer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多列布局的 Footer 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .page-footer {
      background-color: #2196f3;
    }
    .page-footer a {
      color: #ffffff;
    }
    .page-footer a:hover {
      color: #ffeb3b;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>多列布局的 Footer</h4>
    <p>这是一个多列布局的页脚示例。</p>
  </div>

  <!-- Footer -->
  <footer class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col s12 m4">
          <h5 class="white-text">公司信息</h5>
          <p class="grey-text text-lighten-4">关于我们的详细信息，地址，联系方式等。</p>
        </div>
        <div class="col s12 m4">
          <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>
            <li><a class="grey-text text-lighten-3" href="#!">联系</a></li>
          </ul>
        </div>
        <div class="col s12 m4">
          <h5 class="white-text">联系我们</h5>
          <ul>
            <li><i class="material-icons">email</i> <a class="grey-text text-lighten-3" href="mailto:info@example.com">info@example.com</a></li>
            <li><i class="material-icons">phone</i> <a class="grey-text text-lighten-3" href="tel:+123456789">+123 456 

789</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2024 公司名称。所有权利保留。
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

  • 使用 .row 和 .col 类来创建多列布局。
  • 每列包含不同类型的信息，例如公司信息、快速链接和联系信息。

4. 自定义 Footer 样式

你可以通过 CSS 自定义 Footer 的样式，以匹配你的设计需求。

示例：自定义 Footer 样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 Footer 样式示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .page-footer {
      background-color: #000000;
      padding: 20px 0;
    }
    .page-footer .container {
      text-align: center;
    }
    .page-footer h5 {
      color: #ffffff;
    }
    .page-footer p {
      color: #bdbdbd;
    }
    .page-footer a {
      color: #ffffff;
    }
    .page-footer a:hover {
      color: #ff5722;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>自定义 Footer 样式</h4>
    <p>这是一个具有自定义样式的页脚示例。</p>
  </div>

  <!-- Footer -->
  <footer class="page-footer">
    <div class="container">
      <h5>公司名称</h5>
      <p>关于我们 - 业务信息 - 联系我们</p>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2024 公司名称。所有权利保留。
      </div>
    </div>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

  • 使用 CSS 自定义页脚的背景颜色、文字颜色和链接颜色。
  • 通过调整 .container 和 .footer-copyright 的样式来实现特定的布局和设计效果。

结论

Materialize CSS 框架中的 Footer 组件提供了多种功能和样式选项，帮助开发者轻松创建符合设计要求的页脚。无论是基本的页脚布局、带有社交媒体图标的页脚、多列布局，还是自定义样式，Materialize 都能满足你的需求。通过合理的配置和自定义，你可以创建一个既美观又功能丰富的页脚，为用户提供良好的体验和信息展示。

chat评论区
评论列表
menu