閱讀(3.9k) 書簽贊(0) 我要糾錯(cuò)

Material Design Lite 教程

2018-12-26 15:30 更新

Material Design Lite 教程

Material Design Lite ，MDL是使用CSS，JavaScript和HTML創(chuàng)建了一個(gè)UI組件庫(kù)。 MDL UI組件有助于構(gòu)建有吸引力的，一致的，功能性的網(wǎng)頁(yè)，并同時(shí)秉承現(xiàn)代網(wǎng)絡(luò)設(shè)計(jì)原則像瀏覽器的便攜性，設(shè)備獨(dú)立性，以及優(yōu)雅降級(jí)的Web應(yīng)用程序。它有助于創(chuàng)造更快，美麗的，反應(yīng)迅速的網(wǎng)站。它是由谷歌材料設(shè)計(jì)的啟發(fā)。

聽眾

本教程是為想學(xué)習(xí)Material Design Lite 的基礎(chǔ)知識(shí)以及如何使用它來(lái)創(chuàng)建更快速，美觀，網(wǎng)站的響應(yīng)誰(shuí)的專業(yè)人士。本教程介紹了Material Design Lite 的所有基本概念。

先決條件

與之前繼續(xù)學(xué)習(xí)本教程，你應(yīng)該有HTML，CSS，JavaScript中，文檔對(duì)象模型（DOM）和任何文本編輯器有基本的了解。此外，它會(huì)幫助，如果你知道基于Web的應(yīng)用程序是如何工作的。

執(zhí)行Material Design Lite 在線

對(duì)于大多數(shù)在本教程中所舉的例子，你會(huì)發(fā)現(xiàn)一個(gè)嘗試，它的選擇。使用此選項(xiàng)可當(dāng)場(chǎng)執(zhí)行你的Material Design Lite 程序，享受你的學(xué)習(xí)。

使用可在下面的示例代碼框右上角的嘗試，它試圖選項(xiàng)下面的例子-

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

以上內(nèi)容是否對(duì)您有幫助：

Material Design Lite 概述 →

寫筆記

我要補(bǔ)充