材料設計ライトが私のウェブサイトで動作していません

Google材料設計のliteで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を削除して色を取得しました。また、余白のサイズを5px（3emがヘッダーには大きすぎます）に変更することでCSSも更新されました。ヘッダーのタイトルは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

答えは正しいようですが、ヘッダーに背景とヘッダーの最初の見出しと、ヘッダーの下の2番目のヘッダー、つまり背景イメージの終わりを指定したい場合はどうなりますか？ – pulkit

実際には私は初心者のウェブデザインです – pulkit

面白い私は19h前（冗長の横に）私の答えに異なるものが表示されません。 @pulkitはあなたの質問への更新であることを説明してください。 –

を私は目標が何であるかわからないんだけど、メインの要素にあなたのコンテンツを入れてみてください。

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

または追加のヘッダー要素。

出典

2016-03-19 13:43:13

ちょうどあなたのブラウザでこれを実行しようと、あなたは、h1はページ – pulkit

のトップにあなたがメインにそれを置くことができない場合は移動ABOUT知らせる見出していることがわかります。 –

私もそれをメインに入れてみましたが、何も変わりませんでした。 – pulkit

材料設計ライトが私のウェブサイトで動作していません

答えて

関連する問題