Forum | Najnowsze tutoriale tworzenie stron internetowych
 

Materiał Projekt Lite Tutorial


Materiał Projekt Lite, MDL jest biblioteka komponentów UI utworzone z CSS, JavaScript i HTML. Składniki MDL UI pomaga w tworzeniu atrakcyjnych, spójnych i funkcjonalnych stron internetowych i aplikacji internetowych przy zachowaniu nowoczesnych zasad projektowania stron internetowych, takich jak przenoszenie urządzenia przeglądarki, niezależność i wdzięku degradacji. Pomaga w tworzeniu szybciej, piękne i elastycznych stron internetowych. Jest on inspirowany z Google Materiał Design.


Publiczność

Ten poradnik jest przeznaczony dla profesjonalistów, którzy chcieliby nauczyć się podstaw projektowania materiałów Lite i jak go używać do tworzenia szybciej, piękne i elastycznych stron internetowych. Ten poradnik wyjaśnia wszystkie podstawowe koncepcje projektowania materiałów Lite.


Wymagania

Przed przystąpieniem do tego kursu, trzeba mieć podstawową wiedzę na temat HTML, CSS, JavaScript, Document Object Model (DOM), oraz dowolnego edytora tekstu. Ponadto, to pomoże, jeśli wiesz, jak działają aplikacje internetowe oparte.


Wykonanie projektu Tworzywo Lite Online

Dla większości z przykładów podanych w niniejszym poradniku znajdziesz opcjęTry-it.Użyj tej opcji, aby wykonywać swoje programy Materiał Projekt Lite na miejscu i cieszyć się swoją naukę.

Wypróbuj poniższy przykład używając opcjiTry-one dostępne w prawym górnym rogu poniższym polu kod przykładowy -

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