-
材料设计精简教程

材料设计精简教程

Material Design Lite，MDL是使用CSS，JavaScript和HTML创建的UI组件库。MDL UI组件有助于创建有吸引力，一致和功能的网页和网络应用程序，同时遵守现代网页设计原则，如浏览器可移植性，设备独立性和优雅的降级。它有助于创建更快，美观和响应更快的网站。它的灵感来源于Google材料设计。

适合人员

本教程适用于想要了解Material Design Lite的基础知识的专业人士，以及如何使用它来创建更快，美观和响应更快的网站。本教程介绍了Material Design Lite的所有基本概念。

学习提醒

在进行本教程之前，您应该对HTML，CSS，JavaScript，文档对象模型（DOM）和任何文本编辑器有一个基本的了解。另外，如果您了解基于Web的应用程序如何工作，这将有所帮助。

在线执行材料设计Lite

对于本教程中给出的大多数示例，您将找到一个Try-it选项。使用此选项即时执行您的Material Design Lite程序，并享受您的学习。

请尝试以下示例，使用以下示例代码框右上角的Try-it选项 -

<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://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-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>

© 2023 mianshi8.net MIT license