材料設計精簡版不工作在我的網站

我試着用谷歌材料設計精簡版製作一個html模板，並添加和標題工作正常，但因爲我在它下面添加任何東西，它只是移動到頂部。看到代碼的幫助：材料設計精簡版不工作在我的網站

.demo-layout-transparent { 
 
    background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center/cover; 
 
    font-family: 'League Spartan'; 
 
} 
 

 
.demo-layout-transparent .mdl-layout__header, 
 
.demo-layout-transparent .mdl-layout__drawer-button { 
 
    color: white; 
 
} 
 

 
.mdl-layout-title { 
 
    font-family: 'League Spartan'; 
 
    font-size: 3em; 
 
    margin-top: 1em; 
 
} 
 

 
.subtitle { 
 
    font-family: "League Spartan"; 
 
    font-size: 4em; 
 
    color: floralwhite; 
 
    text-align: center; 
 
    margin-top: 2em; 
 
} 
 

 
.subtitle span{ 
 
    color: deepskyblue; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 

 
    
 
    
 
<body> 
 
    <div class="home"> 
 
<div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header"> 
 
    <header class="mdl-layout__header mdl-layout__header--transparent"> 
 
    <div class="mdl-layout__header-row"> 
 
     <!-- Title --> 
 
     <span class="mdl-layout-title">DesignAmbition</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> 
 
     <a class="mdl-navigation__link" href="">Portfolio</a> 
 
     <a class="mdl-navigation__link" href="">Contact</a> 
 
     </nav> 
 
    </div> 
 
    </header> 
 
    <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1> 
 
    <div class="mdl-layout__drawer mdl-layout--small-screen-only"> 
 
    <span class="mdl-layout-title">Design <br/> Ambition`</span> 
 
    <nav class="mdl-navigation"> 
 
     <a class="mdl-navigation__link" href="">Home</a> 
 
     <a class="mdl-navigation__link" href="">About</a> 
 
     <a class="mdl-navigation__link" href="">Portfolio</a> 
 
     <a class="mdl-navigation__link" href="">Contact</a> 
 
    </nav> 
 
    </div> 
 
    <main class="mdl-layout__content"> 
 
    </main> 
 
     
 
    </div> 
 
    </div> 
 
    
 
    
 
<div class="mdl-layout__content"> 
 
     <h1> ABOUT </h1> 
 
    </div> 
 
    </body> 
 
</html>

來源

2016-03-19 pulkit

內容應該在<div class="page-content">。
編輯：標題在頁面中是透明的。我從Header類中刪除了--transparent以獲得它的顏色。 CSS也已更新，將margin-top的大小更改爲5px（3em對於標題太大）。標題標題的字體大小也從3em改爲2em。也刪除<div class="home">，因爲沒有使用它。

.demo-layout-transparent { 
 
    background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center/cover; 
 
    font-family: 'League Spartan'; 
 
} 
 

 
.demo-layout-transparent .mdl-layout__header, 
 
.demo-layout-transparent .mdl-layout__drawer-button { 
 
    color: white; 
 
} 
 

 
.mdl-layout-title { 
 
    font-family: 'League Spartan'; 
 
    font-size: 2em; 
 
    margin-top: 5px; 
 
} 
 

 
.subtitle { 
 

 
    font-size: 4em; 
 
    color: floralwhite; 
 
    text-align: center; 
 
    margin-top: 2em; 
 
} 
 

 
.subtitle span{ 
 
    color: deepskyblue; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <link rel="stylesheet" href="main.css"> 
 
</head> 
 
<body> 
 
    <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header"> 
 
     <header class="mdl-layout__header mdl-layout__header"> 
 
     <div class="mdl-layout__header-row"> 
 
      <!-- Title --> 
 
      <span class="mdl-layout-title">Design Ambition</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> 
 
      <a class="mdl-navigation__link" href="">Portfolio</a> 
 
      <a class="mdl-navigation__link" href="">Contact</a> 
 
      </nav> 
 
     </div> 
 
     </header> 
 

 
     <div class="mdl-layout__drawer mdl-layout--small-screen-only"> 
 

 
     <span class="mdl-layout-title">Design <br/> Ambition`</span> 
 
     <nav class="mdl-navigation"> 
 
      <a class="mdl-navigation__link" href="">Home</a> 
 
      <a class="mdl-navigation__link" href="">About</a> 
 
      <a class="mdl-navigation__link" href="">Portfolio</a> 
 
      <a class="mdl-navigation__link" href="">Contact</a> 
 
     </nav> 
 
     </div> 
 
     <main class="mdl-layout__content"> 
 
     <div class="page-content"> 
 
      <!-- contents starts here --> 
 

 
      <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1> 
 
      <h1>About</h1> 
 

 
      <!-- contents ends here --> 
 
     </div> 
 
     </main> 
 
    </div> 
 
</body>

來源

2016-03-20 07:31:18

你的回答似乎是正確的，但如果我想給標題背景和標題中的第一個標題和標題下面的第二個標題，即背景圖像結束的位置，該怎麼辦。 – pulkit

其實我是初學者在網頁設計 – pulkit

有趣我沒有看到什麼不同於我的回答19小時前（除了詳細）。 @pulkit請解釋你的問題是什麼更新目標是， –

我不知道目標是什麼，但儘量把你的內容到主元素。

<main class="mdl-layout__content"> 
    <div class="page-content"><!-- Your content goes here --></div> 
</main>

或成一個額外的頭元素。

來源

2016-03-19 13:43:13

剛剛嘗試在瀏覽器中運行這個，你會看到H1標題，說明關於移動到 – pulkit

頁面的頂部，如果你把它放到主不會。 –

我也試過把它放在主體中，但沒有任何變化 – pulkit

材料設計精簡版不工作在我的網站

回答

相關問題