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

Material Design Lite 頁(yè)腳

2018-12-19 18:17 更新

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

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

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

例子

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

兆豐頁(yè)腳

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

這里使用以下MDL類。

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

mdl_megafooter.htm

<html>
   <head>
      <link rel="stylesheet"  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" >
   </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é)果

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

迷你頁(yè)腳

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

這里使用以下MDL類。

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

mdl_minifooter.htm

<html>
   <head>
      <link rel="stylesheet"  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" >
   </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é)果

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

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

← Material Design Lite 標(biāo)簽

Material Design Lite 徽章 →

寫筆記

我要補(bǔ)充

查看完整版筆記

99re热视频这里只精品,久久久天堂国产精品女人,国产av一区二区三区,久久久精品成人免费看片,99久久精品免费看国产一区二区三区

Material Design Lite 頁(yè)腳

例子

兆豐頁(yè)腳

結(jié)果

迷你頁(yè)腳

結(jié)果