logo标签列表

我的网站中Material Design Lite无法工作

htmlcssmaterial-designmaterial-design-lite
3

我尝试使用Google Material Design 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>

2个回答
1
我不确定目标是什么，但请尝试将您的内容放入主要元素中。
<main class="mdl-layout__content">
  <div class="page-content"><!-- Your content goes here --></div>
</main>

或者转换为另一个标题元素。
只需在浏览器中运行此代码，您就会看到标题为“关于”的h1标签移动到页面顶部。 - pulkit
而且如果你把它放到主函数里面就不会起作用。 - hr_117
我也尝试将其放在主函数中，但没有任何变化。 - pulkit
你的示例中有两个h1标签（.subtitel和ABOUT）。它们似乎都应该属于main。 - hr_117
1
内容应该在<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>

你的答案似乎是正确的，但如果我想给标题栏设置一个背景，并将第一个标题放在标题栏中，第二个标题放在标题栏下方，即在背景图像结束的地方，该怎么办？ - pulkit
其实我是网页设计的初学者。 - pulkit
有趣的是，我没有看到我的答案与19小时前有什么不同（除了啰嗦之外）。@pulkit，请在您的问题更新中解释目标。 - hr_117
谢谢你的帮助。你离我想要的很接近，但我想把关于部分放在页眉部分下面。因此，关于标题必须放在页眉的背景图像下方，而不是在其上方。 - pulkit
@pulkit，实际上，我没有理解重点。你能讲得更清楚吗？ - Shamshid
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接