ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

Material Design Liteเกี่ยวกับการสอน


การออกแบบวัสดุ Lite, MDL เป็นห้องสมุดองค์ประกอบ UI ที่สร้างขึ้นด้วย CSS, JavaScript และ HTML MDL UI ส่วนประกอบจะช่วยในการสร้างเสน่ห์, ที่สอดคล้องกันและการทำงานหน้าเว็บและเว็บแอปในขณะที่การยึดมั่นในหลักการออกแบบเว็บที่ทันสมัย​​เช่นพกพาเบราว์เซอร์, อุปกรณ์อิสระและการย่อยสลายที่สง่างาม ช่วยในการสร้างได้เร็วขึ้นสวยงามและเว็บไซต์ที่ตอบสนอง มันเป็นแรงบันดาลใจจาก Google ออกแบบวัสดุ


ผู้ชม

กวดวิชานี้มีความหมายสำหรับมืออาชีพที่ต้องการที่จะเรียนรู้พื้นฐานของการออกแบบวัสดุ Lite และวิธีการที่ใช้ในการสร้างได้เร็วขึ้นสวยงามและเว็บไซต์ที่ตอบสนอง กวดวิชานี้จะอธิบายทุกแนวคิดพื้นฐานของการออกแบบวัสดุ Lite


ข้อกำหนดเบื้องต้น

ก่อนที่จะดำเนินการกับการกวดวิชานี้คุณควรจะมีความเข้าใจพื้นฐานของ HTM​​L, CSS, JavaScript, Document Object Model (DOM) และแก้ไขข้อความใด ๆ นอกจากนี้ยังจะช่วยถ้าคุณรู้วิธีการใช้งาน Web-based ทำงาน


ดำเนินการออกแบบวัสดุ Lite ออนไลน์

สำหรับส่วนของตัวอย่างที่กำหนดในการกวดวิชานี้คุณจะได้พบกับตัวเลือกลองมัน ใช้ตัวเลือกนี้จะรันโปรแกรมการออกแบบวัสดุ 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="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>