Material Design Lite 布局
HTML5有以下容器中的元素：
<DIV> -提供HTML内容的通用容器。
<标题> -代表标题部分。
<页脚> -代表页脚部分。
<文> -代表的文章。
<节> -提供各类节的通用容器。
该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于容器。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-布局 标识的容器作为MDL的组成部分。需要外部容器元素。 |
| 2 | MDL-JS-布局 增加了基本的MDL行为的布局。需要外部容器元素。 |
| 3 | MDL-layout__header 标识容器作为MDL的组成部分。必需的头元素。 |
| 4 | MDL-布局图标 用于添加应用程序图标。获取由菜单图标覆盖，如果两者都是可见的。可选的图标元素。 |
| 五 | MDL-layout__header行 标识容器作为MDL标题行。需要在头内容的容器。 |
| 6 | MDL-layout__title 标识布局标题文本。需要在布局标题容器。 |
| 7 | MDL-布局间隔 用于对准头或抽屉内的元件。它生长以填充剩余的空间。常用于右对齐的元素。可选的DIV布局如下称号。 |
| 8 | MDL-导航 标识容器作为MDL导航组。需要导航元素。 |
| 9 | MDL-navigation__link 标识主播MDL导航链接。需要对报头和/或抽屉锚元素。 |
| 10 | MDL-layout__drawer 标识容器作为布局MDL抽屉。需要抽屉容器元素上。 |
| 11 | MDL-layout__content 标识容器作为布局MDL内容。主要必备元素。 |
| 12 | MDL-layout__header -滚动 使得与内容标题滚动。可选头元素。 |
| 13 | MDL布局-固定抽屉 使得抽屉始终可见，并在更大的屏幕打开。可选的外部容器元素不是抽屉容器元素上。 |
| 14 | MDL布局-固定头 使头始终可见，即使是在小屏幕。可选的外部容器元素。 |
| 15 | MDL-布局-大屏幕只 隐藏在小屏幕上的元素。可选的MDL-布局中的任何后代。 |
| 16 | MDL-布局-小屏幕只 隐藏在更大屏幕上的元素。可选的MDL-布局中的任何后代。 |
| 17 | MDL-layout__header -瀑布 允许带有多个标题行“瀑布”效应。可选头元素。 |
| 18 | MDL-layout__header -透明 使头部透明和借鉴布局的背景上。可选头元素。 |
| 19 | MDL-layout__header -缝 采用了头部没有影子。可选头元素。 |
| 20 | MDL-layout__tab吧 标识容器作为MDL标签栏。需要容器元素里面的头（标签布局）。 |
| 21 | MDL-layout__tab 标识主播MDL标签链接。需要在标签栏锚元素。 |
| 22 | 是积极的 标识标签作为默认的活动标签。可选的标签栏锚元素和相关的标签部分元素。 |
| 23 | MDL-layout__tab面板 标识容器作为标签内容面板。需要对标签部分元素。 |
| 24 | MDL布局-固定标签 使用而不是默认的滚动标签的固定标签。可选的外部容器元素，里面没有头容器上。 |
例子
下面的例子展示了使用MDL-布局类的样式各种容器。
固定抽屉
要创建具有固定的抽屉，但没有头下面是使用MDL类的模板。
MDL-布局 -标识的div作为MDL的组成部分。
MDL-JS-布局 -增加了基本的MDL行为外层div。
MDL布局-固定抽屉 -使抽屉始终可见，并在更大的屏幕打开。
MDL-layout__drawer -标识DIV的布局MDL抽屉。
MDL-布局标题 -标识布局标题文本。
MDL-导航 -标识DIV的MDL导航组。
MDL-navigation__link -标识主播MDL导航链接。
MDL-layout__content -标识DIV的布局MDL内容。
mdl_fixeddrawer.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
结果
验证结果。
固定头
要创建具有以下附加MDL类固定头使用的模板。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
mdl_fixedheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" style="color:gray">Home</a>
<a class="mdl-navigation__link" href="" style="color:gray">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>
结果
验证结果。
固定页眉和抽屉
要创建具有固定的标题和固定的抽屉，下面的附加MDL类模板使用。
MDL布局-固定抽屉 -使抽屉始终可见，并在更大的屏幕打开。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
mdl_fixedheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" style="color:gray">Home</a>
<a class="mdl-navigation__link" href="" style="color:gray">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>
结果
验证结果。
滚动头
要创建具有滚动头，下面是使用MDL类的模板。
MDL-布局-标题-滚动 -使与内容标题滚动。
mdl_scrollingheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- Uses a header that scrolls with the text, rather than staying locked at the top -->
<div class="mdl-layout mdl-js-layout ">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
结果
验证结果。
缔约头
要创建与合同作为页面向下滚动的标题模板，使用以下MDL类。
MDL-layout__header -瀑布 -允许有多个标题行“瀑布”效应。
mdl_waterfallheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout ">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>
结果
验证结果。
固定头用滚动标签
要创建具有滚动标签标头的模板，使用以下MDL类。
MDL-layout__tab巴 -标识容器作为MDL标签栏。
MDL-layout__tab -标识主播MDL标签链接。
MDL-layout__tab面板 -标识容器作为标签内容面板。
mdl_scrollabletabheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">Tab 1 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">Tab 2 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
结果
验证结果。
固定头固定标签
要创建具有固定的标签，以下附加MDL类的标题用的模板。
MDL布局-固定选项卡 -使用固定的标签，而不是默认的滚动标签。
mdl_fixedtabheader.htm
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<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">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">Tab 1 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">Tab 2 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>
结果
验证结果。