Material Design Lite 教程

2018-12-26 15:30 更新

Material Design Lite 教程

Material Design Lite ，MDL是使用CSS，JavaScript和HTML创建了一个UI组件库。 MDL UI组件有助于构建有吸引力的，一致的，功能性的网页，并同时秉承现代网络设计原则像浏览器的便携性，设备独立性，以及优雅降级的Web应用程序。它有助于创造更快，美丽的，反应迅速的网站。它是由谷歌材料设计的启发。

听众

本教程是为想学习Material Design Lite 的基础知识以及如何使用它来创建更快速，美观，网站的响应谁的专业人士。本教程介绍了Material Design Lite 的所有基本概念。

先决条件

与之前继续学习本教程，你应该有HTML，CSS，JavaScript中，文档对象模型（DOM）和任何文本编辑器有基本的了解。此外，它会帮助，如果你知道基于Web的应用程序是如何工作的。

执行Material Design Lite 在线

对于大多数在本教程中所举的例子，你会发现一个尝试，它的选择。使用此选项可当场执行你的Material Design Lite 程序，享受你的学习。

使用可在下面的示例代码框右上角的尝试，它试图选项下面的例子-

<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="/attachements/w3c/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>

以上内容是否对您有帮助：

Material Design Lite 概述 →

写笔记

我要补充