Material Design Lite 安装环境
如何使用Material Design Lite ？
有使用Material Design Lite 两种方式：
本地安装 -您也可以下载材料{}小学- {}口音和.min.css您material.min.js本地计算机上的文件，并将其包含在HTML代码。
基于CDN版本 -可以包括材料{}小学- {}口音和.min.css直接从内容分发网络（CDN）material.min.js文件到您的HTML代码。
本地安装
转到http://www.getmdl.io/started/index.html下载可用的最新版本。
然后，把下载的文件material.min.js在您的网站，例如/ JS和material.min.css中/ CSS的目录。
例
现在你可以在HTML文件，如下CSS和JS文件-
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="material.min.css">
<script src="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-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">Features</a>
<a class="mdl-navigation__link" href="">About Us</a>
<a class="mdl-navigation__link" href="">Log Out</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>
这将产生以下结果 -
CDN基础的版本
您可以直接从内容分发网络（CDN）包括的js和css文件到您的HTML代码。 storage.googleapis.com提供最新的版本的内容。
我们使用本教程的库storage.googleapis.com CDN版本。
例
现在让我们用material.css和material.js从谷歌CDN把上面的例子。
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">Features</a>
<a class="mdl-navigation__link" href="">About Us</a>
<a class="mdl-navigation__link" href="">Log Out</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>
这将产生以下结果 -