- Materialize轮播图的实现
- 掌握 Materialize CSS:创建响应式网页设计
- 使用 Materialize CSS 框架中的颜色:详解与示例
- 使用 Materialize CSS 框架中的网格系统:详解与示例
- Materialize CSS 框架中的 Helpers(辅助类) 使用指南
- 使用 Materialize CSS 框架中的 Media 类:详解与示例
- Materialize CSS 中 Sass 的使用:详细指南与示例
- Materialize CSS 框架中 Shadow(阴影)的使用详解与示例
- Materialize CSS 框架中 Table 的使用详解与示例
- Materialize CSS 框架中 CSS Transitions 的使用详解
- Materialize CSS 框架中的 Typography 使用详解
- Materialize CSS 框架中 Badges 的使用详解
- Materialize CSS 框架中 Buttons 的使用详解
- Materialize CSS 框架中 Breadcrumbs 的使用详解
- Materialize CSS 框架中 Cards 的使用详解
- Materialize CSS 框架中 Collections 的使用详解
- Materialize CSS 框架中 Floating Action Button 的使用详解
- Materialize CSS 框架中 Footer 的使用详解
- Materialize CSS 框架中 Icons 的使用详解
- Materialize CSS 框架中 Navbar 的使用详解
- Materialize CSS 框架中 Pagination 的使用详解
- Preloader(预加载组件)
- Materialize CSS 框架中的 Carousel 使用指南
- Materialize CSS 框架中的 Collapsible 使用指南
- Materialize CSS 框架中的 Dropdown 使用指南
- Materialize CSS 框架中的 Feature Discovery 使用指南
- Materialize CSS 框架中的 Media 使用指南
- Materialize CSS 框架中的 Javascript Media 使用指南
- Materialize CSS 框架中的 Materialboxed 使用指南
- Materialize CSS 框架中的 Slider 和 Fullscreen Slider 使用指南
- Materialize CSS 框架中的 Modals 使用指南
- Materialize CSS 框架中的 Parallax 使用指南
- Materialize CSS 框架中的 Pushpin 使用指南
- Materialize CSS 框架中的 Scrollspy 使用指南
- Materialize CSS 框架中的 Sidenav 使用指南
- Materialize CSS 框架中的 Tabs 使用指南
- Materialize CSS 框架中的 Toasts 使用指南
- 使用 Materialize CSS 框架中的 Tooltips
- 使用 Materialize CSS 框架中的 Waves 效果
- 使用 Materialize CSS 框架中的 Form Autocomplete
- 使用 Materialize CSS 框架中的 Form Checkboxes
- 使用 Materialize CSS 框架中的 Form Chips
- 使用 Materialize CSS 框架中的 Form Pickers
- 使用 Materialize CSS 框架中的 Form Radio Buttons
- Materialize CSS 框架中的 Form Range 组件使用指南
- Materialize CSS 框架中的 Form Select 组件使用指南
- Materialize CSS 框架中 Form Switches 的使用指南
- Materialize CSS 框架中 Form Text Inputs 的使用指南
- Materialize CSS 框架中的 Auto Init 使用指南
Materialize CSS 框架中 Footer 的使用详解
class FooterFooter(页脚) 是网页布局的重要组成部分,通常用于展示版权信息、联系信息、网站链接等。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评论区
评论列表
{{ item.user.nickname || item.user.username }}