| Sr.No. | 类名和描述 |
| 1 |
mdl-mega-footer
将容器标识为 MDL mega-footer 组件。页脚元素是必需的。
|
| 2 |
mdl-mega-footer__top-section
将容器标识为页脚顶部。顶部"外部"div 元素是必需的。
|
| 3 |
mdl-mega-footer__left-section
将容器标识为左侧部分。左侧部分"内部"div 元素是必需的。
|
| 4 |
mdl-mega-footer__social-btn
标识大型页脚内的装饰方块。按钮元素需要（如果使用）。
|
| 5 |
mdl-mega-footer__right-section
将容器标识为右侧部分。右侧部分"内部"div 元素是必需的。
|
| 6 |
mdl-mega-footer__middle-section
将容器标识为页脚中间部分。中间部分"外部"div 元素是必需的。
|
| 7 |
mdl-mega-footer__drop-down-section
将容器标识为下拉（垂直）内容区域。下拉"内部"div 元素需要。
|
| 8 |
mdl-mega-footer__heading
将标题标识为大型页脚标题。下拉部分中的 h1 元素是必需的。
|
| 9 |
mdl-mega-footer__link-list
将无序列表标识为下拉（垂直）列表。下拉部分内的 ul 元素是必需的。
|
| 10 |
mdl-mega-footer__bottom-section
将容器标识为页脚底部。底部"外部"div 元素是必需的。
|
| 11 |
mdl-logo
将容器标识为带样式的部分标题。大型页脚底部或迷你页脚左侧部分中的"内部"div 元素是必需的。
|
| 12 |
mdl-mini-footer
将容器标识为 MDL 迷你页脚组件。页脚元素是必需的。
|
| 13 |
mdl-mini-footer__left-section
将容器标识为左侧部分。左侧部分"内部"div 元素是必需的。
|
| 14 |
mdl-mini-footer__link-list
将无序列表标识为内联（水平）列表。与"mdl-logo"div 元素同级的 ul 元素是必需的。
|
| 15 |
mdl-mini-footer__right-section
将容器标识为右侧部分。右侧部分"内部"div 元素是必需的。
|
| 16 |
mdl-mini-footer__social-btn
标识迷你页脚内的装饰方块。按钮元素需要（如果使用）。
|
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</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>
</div>
</body>
</html>
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</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>
</div>
</body>
</html>
