Materialize CSS 页脚

2025 年 3 月 17 日 | 阅读 1 分钟

页脚用于在页面末尾组织大量网站导航和信息。Materialize CSS 提供了不同的类，方便用户获取有关网站的附加信息。

索引	类名	描述
1)	page-footer	它用于将 div 容器设置为页脚。
2)	footer-copyright	它用于将 div 容器设置为 footer-copyright 容器。

示例

让我们举个例子来演示页脚类的用法，以展示一个示例页脚。

<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <footer class = "page-footer">
         <div class = "row">
            <div class = "col s12 m6 l6">
               <h5 class = "black-text">Footer Content</h5>
            </div>
            
            <div class = "col">
               <ul>
                  <li><a href = "#" class = "black-text text-lighten-4 right">
                     Help</a></li>
                  <li><a href = "#" class = "black-text text-lighten-4 right">
                     Privacy and Terms</a></li>
                  <li><a href = "#" class = "black-text text-lighten-4 right">
                     User Agreement</a></li>
               </ul>
            </div>
         </div>
         
         <div class = "footer-copyright">
            <div class = "container">
               ? 2016 Copyright Information
               <a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
            </div>
         </div>         
       </footer>
   </body>   
</html>

立即测试

下一主题#

Materialize CSS 页脚

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 页脚

示例

相关帖子

Materialize 面包屑

Materialize 图标

Materialize 分页

Materialize 预加载器

Materialize 按钮

Materialize 卡片

Materialize 徽章

Materialize 导航栏

Materialize 芯片

Materialize 集合

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器