Material Design Lite funktioniert nicht in meiner Website

Ich habe versucht, eine HTML-Vorlage mit Google Material Design Lite und fügte hinzu und Header, die gut funktioniert, aber wie ich etwas unter es hinzufügen, ist es nur nach oben bewegen. Sehen Sie den Code für die Hilfe:Material Design Lite funktioniert nicht in meiner Website

.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>

Quelle

2016-03-19 pulkit

Der Inhalt sollte in <div class="page-content"> sein.
Bearbeiten: Header ist transparent in Ihrer Seite. Ich habe --transparent aus der Header-Klasse entfernt, um Farbe dafür zu erhalten. CSS wurde auch aktualisiert, indem Sie die Größe Ihrer Margin-Top auf 5px geändert haben (3em war zu groß für den Header). Die Schriftgröße wird auch von 3em für Header-Titel auf 2em geändert. Auch entfernt <div class="home">, weil es keine Verwendung gibt.

.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>

Quelle

2016-03-20 07:31:18

Ihre Antwort scheint richtig, aber was, wenn ich der Überschrift einen Hintergrund und die erste Überschrift in der Kopfzeile und die zweite unter der Kopfzeile geben möchte, d. H. Wo das Hintergrundbild endet. – pulkit

Eigentlich bin ich Anfänger in Webdesign – pulkit

Lustig sehe ich nicht, was der Unterschied zu meiner Antwort vor 19h (neben Ausführlichkeit). @ Pulkit erklären Sie bitte in Update auf Ihre Frage, was das Ziel ist, –

Ich bin nicht sicher, was das Ziel ist, sondern versuchen, Ihre Inhalte in das Hauptelement zu setzen.

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

Oder in ein zusätzliches Header-Element.

Quelle

2016-03-19 13:43:13

Probieren Sie diese in Ihrem Browser laufen und Sie werden sehen, dass die h1 zum Seitenanfang – pulkit

Angabe ÜBER bewegt Überschrift Und wenn Sie es in den Haupt setzen wird es nicht. –

Ich habe auch versucht, es in Haupt, aber nichts geändert – pulkit

Material Design Lite funktioniert nicht in meiner Website

Antwort

Verwandte Themen