閱讀(2.2k) 書簽贊(0) 我要糾錯

Material Design Lite 頁腳

2018-12-19 18:17 更新

一個MDL頁腳部分進來兩種主要形式：巨型頁腳和迷你頁腳。 EGA英尺含有比迷你頁腳更復雜的內(nèi)容。一個大型的頁腳可以代表這是由水平線分隔的內(nèi)容多個部分，而迷你頁腳呈現(xiàn)一個單一的內(nèi)容部分。這兩種頁腳通常包含信息和點擊的內(nèi)容，如鏈接。

該MDL提供多種CSS類各種預先定義的外觀和行為增強功能適用于特大頁腳和迷你頁腳。下表中提到的可用類和它們的影響。

SN	類名稱和說明
1	MDL-萬英尺標識容器作為MDL大型頁腳部分。所需的頁腳元素。
2	mdl-mega-footer__top節(jié) 標識容器作為頁腳頂部。需要頂部“外”的div元素。
3	mdl-mega-footer__left節(jié) 標識容器作為左側(cè)部分。需要遺節(jié)“內(nèi)部”div元素。
4	mdl-mega-footer__social-BTN 標識巨型英尺內(nèi)的裝飾廣場。需要的按鈕元素（如果使用）。
五	mdl-mega-footer__right節(jié) 標識容器作為右側(cè)部分。需要正確的部分“內(nèi)部”div元素。
6	mdl-mega-footer__middle節(jié) 標識容器作為頁腳中間部分。所需的中間部分“外”的div元素。
7	mdl-mega-footer__drop下來節(jié) 標識容器作為下拉（垂直）的內(nèi)容區(qū)域。需要下拉“內(nèi)部”的div元素。
8	mdl-mega-footer__heading 標識標題為大型頁腳標題。需要內(nèi)部下拉條H1元素。
9	mdl-mega-footer__link列表標識無序列表作為下拉（垂直）名單。需要內(nèi)部下拉條ul元素。
10	mdl-mega-footer__bottom節(jié) 標識容器作為一個頁腳底部。需要底部“外”的div元素。
11	MDL-標志標識一個容器作為風格的部分標題。需要“內(nèi)部”的div在巨型頁腳底部截面或迷你頁腳左部分元素。
12	MDL-迷你頁腳標識容器作為MDL迷你頁腳部分。所需的頁腳元素。
13	mdl-mini-footer__left節(jié) 標識容器作為左側(cè)部分。需要遺節(jié)“內(nèi)部”div元素。
14	mdl-mini-footer__link列表標識無序列表作為一個內(nèi)聯(lián)（水平）名單。需要ul元素同級“MDL-標識”div元素。
15	mdl-mini-footer__right節(jié) 標識容器作為右側(cè)部分。需要正確的部分“內(nèi)部”div元素。
16	mdl-mini-footer__social-BTN 標識迷你英尺內(nèi)的裝飾廣場。需要的按鈕元素（如果使用）。

例子

下面的例子展示了使用MDL頁腳類款式頁腳。

兆豐頁腳

下面的例子展示了使用MDL-萬英尺級在頁腳布局的內(nèi)容。

這里使用以下MDL類。

MDL-布局 -標識的div作為MDL的組成部分。
MDL-JS-布局 -增加了基本的MDL行為外層div。
MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。
MDL-layout__header行 -標識容器作為MDL標題行。
MDL-布局標題 -標識布局標題文本。
MDL-layout__content -標識DIV的布局MDL內(nèi)容。
MDL-MEGA英尺 -識別容器為MDL大型頁腳部分。
mdl-mega-footer__top節(jié) -標識容器作為頁腳頂部。
mdl-mega-footer__left節(jié) -標識容器作為左側(cè)部分。
mdl-mega-footer__social-BTN -標識迷你英尺內(nèi)的裝飾廣場。
mdl-mega-footer__right節(jié) -標識容器作為右側(cè)部分。
mdl-mega-footer__middle節(jié) -標識容器作為頁腳中間部分。
MDL-巨型footer__drop -下-部分 -標識容器作為下拉（垂直）的內(nèi)容區(qū)域。
mdl-mega-footer__heading -標識標題為大型頁腳標題。
mdl-mega-footer__link列表 -標識為內(nèi)聯(lián)（水平）列表中的無序列表。
mdl-mega-footer__bottom節(jié) -標識容器作為一個頁腳底部。
MDL-標志 -標識容器作為風格的部分標題。

mdl_megafooter.htm

<html>
   <head>
      <link rel="stylesheet"  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" >
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Tabs</span>          
         </div>       
      </header>     
      <main class="mdl-layout__content">    
         <footer class="mdl-mega-footer">
            <div class="mdl-mega-footer__top-section">
               <div class="mdl-mega-footer__left-section">
                  <button class="mdl-mega-footer__social-btn">1</button>
                  <button class="mdl-mega-footer__social-btn">2</button>
                  <button class="mdl-mega-footer__social-btn">3</button>
               </div>
               <div class="mdl-mega-footer__right-section">
                  <a href="">Link 1</a>
                  <a href="">Link 2</a>
                  <a href="">Link 3</a>
               </div>
            </div>
            <div class="mdl-mega-footer__middle-section">
               <div class="mdl-mega-footer__drop-down-section">
                  <h1 class="mdl-mega-footer__heading">Heading </h1>
                  <ul class="mdl-mega-footer__link-list">
                     <li><a href="">Link A</a></li>
                     <li><a href="">Link B</a></li>      
                  </ul>
               </div>  
               <div class="mdl-mega-footer__drop-down-section">
                  <h1 class="mdl-mega-footer__heading">Heading </h1>
                  <ul class="mdl-mega-footer__link-list">
                     <li><a href="">Link C</a></li>
                     <li><a href="">Link D</a></li>      
                  </ul>
               </div>  	
            </div>
            <div class="mdl-mega-footer__bottom-section">
               <div class="mdl-logo">
                  Bottom Section
               </div>
               <ul class="mdl-mega-footer__link-list">
                  <li><a href="">Link A</a></li>
                  <li><a href="">Link B</a></li>
               </ul>
            </div>
         </footer>
      </main>
   </body>
</html>

結(jié)果

驗證結(jié)果。

迷你頁腳

下面的例子展示了使用MDL-小尾類的頁腳布局的內(nèi)容。

這里使用以下MDL類。

MDL-布局 -標識的div作為MDL的組成部分。
MDL-JS-布局 -增加了基本的MDL行為外層div。
MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。
MDL-layout__header行 -標識容器作為MDL標題行。
MDL-布局標題 -標識布局標題文本。
MDL-layout__content -標識DIV的布局MDL內(nèi)容。
MDL-迷你頁腳 -識別容器為MDL迷你頁腳部分。
mdl-mini-footer__left節(jié) -標識容器作為左側(cè)部分。
MDL-標志 -標識容器作為風格的部分標題。
mdl-mini-footer__link列表 -標識為內(nèi)聯(lián)（水平）列表中的無序列表。
mdl-mini-footer__right節(jié) -標識容器作為右側(cè)部分。

mdl_minifooter.htm

<html>
   <head>
      <link rel="stylesheet"  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" >
   </head>
<body>
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">      
            <span class="mdl-layout-title">Material Design Tabs</span>          
         </div>       
      </header>     
      <main class="mdl-layout__content">    
         <footer class="mdl-mini-footer">
            <div class="mdl-mini-footer__left-section">
               <div class="mdl-logo">
                  Copyright Information
               </div>
               <ul class="mdl-mini-footer__link-list">
                  <li><a href="#">Help</a></li>
                  <li><a href="#">Privacy and Terms</a></li>
                  <li><a href="#">User Agreement</a></li>
               </ul>
            </div>
            <div class="mdl-mini-footer__right-section">
               <button class="mdl-mini-footer__social-btn">1</button>
               <button class="mdl-mini-footer__social-btn">2</button>
               <button class="mdl-mini-footer__social-btn">3</button>
            </div>
         </footer>
      </main>
   </body>
</html>

結(jié)果

驗證結(jié)果。

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

← Material Design Lite 標簽

Material Design Lite 徽章 →

寫筆記

我要補充