我尝试使用谷歌材料设计精简版制作一个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>
&#13;
答案 0 :(得分:1)
我不确定目标是什么,但尝试将您的内容放入主要元素。
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
或者添加一个额外的标题元素。
答案 1 :(得分:1)
内容应位于constructor(nameService: NameService)
修改:标题在您的页面中是透明的。我从Header类中删除了<div class="page-content">
以获得颜色。通过将margin-top的大小更改为5px(3em对于标题来说太大)来更新CSS。对于标题标题,字体大小也从3em更改为2em。同时删除--transparent
,因为没有使用它。
<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;
}