免费AI编程助手
Material Design Lite 页脚
一个MDL页脚部分进来两种主要形式：巨型页脚和迷你页脚。 EGA英尺含有比迷你页脚更复杂的内容。一个大型的页脚可以代表这是由水平线分隔的内容多个部分，而迷你页脚呈现一个单一的内容部分。这两种页脚通常包含信息和点击的内容，如链接。
该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于特大页脚和迷你页脚。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-万英尺 标识容器作为MDL大型页脚部分。所需的页脚元素。 |
| 2 | mdl-mega-footer__top节 标识容器作为页脚顶部。需要顶部“外”的div元素。 |
| 3 | mdl-mega-footer__left节 标识容器作为左侧部分。需要遗节“内部”div元素。 |
| 4 | mdl-mega-footer__social-BTN 标识巨型英尺内的装饰广场。需要的按钮元素（如果使用）。 |
| 五 | mdl-mega-footer__right节 标识容器作为右侧部分。需要正确的部分“内部”div元素。 |
| 6 | mdl-mega-footer__middle节 标识容器作为页脚中间部分。所需的中间部分“外”的div元素。 |
| 7 | mdl-mega-footer__drop下来节 标识容器作为下拉（垂直）的内容区域。需要下拉“内部”的div元素。 |
| 8 | mdl-mega-footer__heading 标识标题为大型页脚标题。需要内部下拉条H1元素。 |
| 9 | mdl-mega-footer__link列表 标识无序列表作为下拉（垂直）名单。需要内部下拉条ul元素。 |
| 10 | mdl-mega-footer__bottom节 标识容器作为一个页脚底部。需要底部“外”的div元素。 |
| 11 | MDL-标志 标识一个容器作为风格的部分标题。需要“内部”的div在巨型页脚底部截面或迷你页脚左部分元素。 |
| 12 | MDL-迷你页脚 标识容器作为MDL迷你页脚部分。所需的页脚元素。 |
| 13 | mdl-mini-footer__left节 标识容器作为左侧部分。需要遗节“内部”div元素。 |
| 14 | mdl-mini-footer__link列表 标识无序列表作为一个内联（水平）名单。需要ul元素同级“MDL-标识”div元素。 |
| 15 | mdl-mini-footer__right节 标识容器作为右侧部分。需要正确的部分“内部”div元素。 |
| 16 | mdl-mini-footer__social-BTN 标识迷你英尺内的装饰广场。需要的按钮元素（如果使用）。 |
例子
下面的例子展示了使用MDL页脚类款式页脚。
兆丰页脚
下面的例子展示了使用MDL-万英尺级在页脚布局的内容。
这里使用以下MDL类。
MDL-布局 -标识的div作为MDL的组成部分。
MDL-JS-布局 -增加了基本的MDL行为外层div。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
MDL-layout__header行 -标识容器作为MDL标题行。
MDL-布局标题 -标识布局标题文本。
MDL-layout__content -标识DIV的布局MDL内容。
MDL-MEGA英尺 -识别容器为MDL大型页脚部分。
mdl-mega-footer__top节 -标识容器作为页脚顶部。
mdl-mega-footer__left节 -标识容器作为左侧部分。
mdl-mega-footer__social-BTN -标识迷你英尺内的装饰广场。
mdl-mega-footer__right节 -标识容器作为右侧部分。
mdl-mega-footer__middle节 -标识容器作为页脚中间部分。
MDL-巨型footer__drop -下-部分 -标识容器作为下拉（垂直）的内容区域。
mdl-mega-footer__heading -标识标题为大型页脚标题。
mdl-mega-footer__link列表 -标识为内联（水平）列表中的无序列表。
mdl-mega-footer__bottom节 -标识容器作为一个页脚底部。
MDL-标志 -标识容器作为风格的部分标题。
mdl_megafooter.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class="mdl-layout__content">
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__top-section">
<div class="mdl-mega-footer__left-section">
<button class="mdl-mega-footer__social-btn">1</button>
<button class="mdl-mega-footer__social-btn">2</button>
<button class="mdl-mega-footer__social-btn">3</button>
</div>
<div class="mdl-mega-footer__right-section">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</div>
</div>
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Heading </h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
</ul>
</div>
<div class="mdl-mega-footer__drop-down-section">
<h1 class="mdl-mega-footer__heading">Heading </h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link C</a></li>
<li><a href="">Link D</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<div class="mdl-logo">
Bottom Section
</div>
<ul class="mdl-mega-footer__link-list">
<li><a href="">Link A</a></li>
<li><a href="">Link B</a></li>
</ul>
</div>
</footer>
</main>
</body>
</html>
结果
验证结果。
迷你页脚
下面的例子展示了使用MDL-小尾类的页脚布局的内容。
这里使用以下MDL类。
MDL-布局 -标识的div作为MDL的组成部分。
MDL-JS-布局 -增加了基本的MDL行为外层div。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
MDL-layout__header行 -标识容器作为MDL标题行。
MDL-布局标题 -标识布局标题文本。
MDL-layout__content -标识DIV的布局MDL内容。
MDL-迷你页脚 -识别容器为MDL迷你页脚部分。
mdl-mini-footer__left节 -标识容器作为左侧部分。
MDL-标志 -标识容器作为风格的部分标题。
mdl-mini-footer__link列表 -标识为内联（水平）列表中的无序列表。
mdl-mini-footer__right节 -标识容器作为右侧部分。
mdl_minifooter.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class="mdl-layout__content">
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">
Copyright Information
</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy and Terms</a></li>
<li><a href="#">User Agreement</a></li>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<button class="mdl-mini-footer__social-btn">1</button>
<button class="mdl-mini-footer__social-btn">2</button>
<button class="mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</body>
</html>
结果
验证结果。
更多建议：