Material Design Lite 布局

2018-12-19 18:17 更新

HTML5有以下容器中的元素：

  • <DIV> -提供HTML內(nèi)容的通用容器。

  • <標(biāo)題> -代表標(biāo)題部分。

  • <頁腳> -代表頁腳部分。

  • <文> -代表的文章。

  • <節(jié)> -提供各類節(jié)的通用容器。

該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)功能適用于容器。下表中提到的可用類和它們的影響。

SN 類名稱和說明
1 MDL-布局
標(biāo)識的容器作為MDL的組成部分。需要外部容器元素。
2 MDL-JS-布局
增加了基本的MDL行為的布局。需要外部容器元素。
3 MDL-layout__header
標(biāo)識容器作為MDL的組成部分。必需的頭元素。
4 MDL-布局圖標(biāo)
用于添加應(yīng)用程序圖標(biāo)。獲取由菜單圖標(biāo)覆蓋，如果兩者都是可見的。可選的圖標(biāo)元素。
五 MDL-layout__header行
標(biāo)識容器作為MDL標(biāo)題行。需要在頭內(nèi)容的容器。
6 MDL-layout__title
標(biāo)識布局標(biāo)題文本。需要在布局標(biāo)題容器。
7 MDL-布局間隔
用于對準(zhǔn)頭或抽屜內(nèi)的元件。它生長以填充剩余的空間。常用于右對齊的元素。可選的DIV布局如下稱號。
8 MDL-導(dǎo)航
標(biāo)識容器作為MDL導(dǎo)航組。需要導(dǎo)航元素。
9 MDL-navigation__link
標(biāo)識主播MDL導(dǎo)航鏈接。需要對報頭和/或抽屜錨元素。
10 MDL-layout__drawer
標(biāo)識容器作為布局MDL抽屜。需要抽屜容器元素上。
11 MDL-layout__content
標(biāo)識容器作為布局MDL內(nèi)容。主要必備元素。
12 MDL-layout__header -滾動
使得與內(nèi)容標(biāo)題滾動?？蛇x頭元素。
13 MDL布局-固定抽屜
使得抽屜始終可見，并在更大的屏幕打開?？蛇x的外部容器元素不是抽屜容器元素上。
14 MDL布局-固定頭
使頭始終可見，即使是在小屏幕。可選的外部容器元素。
15 MDL-布局-大屏幕只
隱藏在小屏幕上的元素。可選的MDL-布局中的任何后代。
16 MDL-布局-小屏幕只
隱藏在更大屏幕上的元素。可選的MDL-布局中的任何后代。
17 MDL-layout__header -瀑布
允許帶有多個標(biāo)題行“瀑布”效應(yīng)。可選頭元素。
18 MDL-layout__header -透明
使頭部透明和借鑒布局的背景上。可選頭元素。
19 MDL-layout__header -縫
采用了頭部沒有影子。可選頭元素。
20 MDL-layout__tab吧
標(biāo)識容器作為MDL標(biāo)簽欄。需要容器元素里面的頭（標(biāo)簽布局）。
21 MDL-layout__tab
標(biāo)識主播MDL標(biāo)簽鏈接。需要在標(biāo)簽欄錨元素。
22 是積極的
標(biāo)識標(biāo)簽作為默認(rèn)的活動標(biāo)簽。可選的標(biāo)簽欄錨元素和相關(guān)的標(biāo)簽部分元素。
23 MDL-layout__tab面板
標(biāo)識容器作為標(biāo)簽內(nèi)容面板。需要對標(biāo)簽部分元素。
24 MDL布局-固定標(biāo)簽
使用而不是默認(rèn)的滾動標(biāo)簽的固定標(biāo)簽?？蛇x的外部容器元素，里面沒有頭容器上。

例子

下面的例子展示了使用MDL-布局類的樣式各種容器。

固定抽屜

要創(chuàng)建具有固定的抽屜，但沒有頭下面是使用MDL類的模板。

  1. MDL-布局 -標(biāo)識的div作為MDL的組成部分。

  2. MDL-JS-布局 -增加了基本的MDL行為外層div。

  3. MDL布局-固定抽屜 -使抽屜始終可見，并在更大的屏幕打開。

  4. MDL-layout__drawer -標(biāo)識DIV的布局MDL抽屜。

  5. MDL-布局標(biāo)題 -標(biāo)識布局標(biāo)題文本。

  6. MDL-導(dǎo)航 -標(biāo)識DIV的MDL導(dǎo)航組。

  7. MDL-navigation__link -標(biāo)識主播MDL導(dǎo)航鏈接。

  8. MDL-layout__content -標(biāo)識DIV的布局MDL內(nèi)容。

mdl_fixeddrawer.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!</div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

固定頭

要創(chuàng)建具有以下附加MDL類固定頭使用的模板。

  1. MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。

mdl_fixedheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- Always shows a header, even in smaller screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

固定頁眉和抽屜

要創(chuàng)建具有固定的標(biāo)題和固定的抽屜，下面的附加MDL類模板使用。

  1. MDL布局-固定抽屜 -使抽屜始終可見，并在更大的屏幕打開。

  2. MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。

mdl_fixedheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

滾動頭

要創(chuàng)建具有滾動頭，下面是使用MDL類的模板。

  1. MDL-布局-標(biāo)題-滾動 -使與內(nèi)容標(biāo)題滾動。

mdl_scrollingheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!--  Uses a header that scrolls with the text, rather than staying  locked at the top -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--scroll">      
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 </div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

締約頭

要創(chuàng)建與合同作為頁面向下滾動的標(biāo)題模板，使用以下MDL類。

  1. MDL-layout__header -瀑布 -允許有多個標(biāo)題行“瀑布”效應(yīng)。

mdl_waterfallheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
	     <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
	  </div>
	    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 <br/><br/><br/><br/><br/><br/><br/><br/>...
		 </div>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

固定頭用滾動標(biāo)簽

要創(chuàng)建具有滾動標(biāo)簽標(biāo)頭的模板，使用以下MDL類。

  1. MDL-layout__tab巴 -標(biāo)識容器作為MDL標(biāo)簽欄。

  2. MDL-layout__tab -標(biāo)識主播MDL標(biāo)簽鏈接。

  3. MDL-layout__tab面板 -標(biāo)識容器作為標(biāo)簽內(nèi)容面板。

mdl_scrollabletabheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

固定頭固定標(biāo)簽

要創(chuàng)建具有固定的標(biāo)簽，以下附加MDL類的標(biāo)題用的模板。

  1. MDL布局-固定選項(xiàng)卡 -使用固定的標(biāo)簽，而不是默認(rèn)的滾動標(biāo)簽。

mdl_fixedtabheader.htm 

<html>
   <head>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

結(jié)果

驗(yàn)證結(jié)果。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號