正文颜色出现在标题上方

我正试图设计谷歌播放像网页设计(移动版)。我使用自定义网格系统(12 col0.5 margin)。问题是，身体颜色出现在头部部分(我认为是这样，也许这是一个不同的问题)。我想让它看起来/滚动像这样:google play手机版示例图片

代码如下:

* *

你可能需要放大到250%或横向最大宽度:640px来查看设计。

* *

body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
  background: #eeeeee;
}
html {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
.top {
  height: auto;
  margin: auto;
  font-family: Roboto Light;
}
.nav {
  height: 40px;
  width: 100%;
  position: fixed;
  background: #4caf50;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
  font-size: 20px;
  width: auto;
  padding: 5px;
  margin: 5px;
  text-decoration: none;
  color: white;
  text-align: center;
}
.nav a:hover,
.nav a:active {
  background-color: #388e38;
}
.header {
  background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
  height: 70%;
  width: 100%;
}
a {
  text-decoration: none;
}
.container {
  margin: 5%;
  background: white;
}
.personal_icon {
  margin: 5%;
}

<html>
<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
  <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
  <link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
  <link rel="stylesheet" href="grid.css">
</head>
<body>
  <div class="top">
    <div class="nav">
      <nav>
        <img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
        <a href="#" style="float:left; margin-top:0px; height:30px;">About Me</a>
        &nbsp;
        <a href="#" style="float:left; margin-top:0px; height:30px;">My Projects</a>
        &nbsp;
      </nav>
    </div>
  </div>
  <br>
  <div class="header">
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

您想要这样的东西。在您的代码中，您正在修复header的bg-image，因此正文将在该图像上滚动，因此需要修复header而不是修复bg-image

body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
  background: #eeeeee;
  padding-top:70vh;
}
html {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
.top {
  height: auto;
  margin: auto;
  font-family: Roboto Light;
}
.nav {
  height: 40px;
  width: 100%;
  position: fixed;
  background: #4caf50;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
  top:0;
}
.nav a:link,
.nav a:visited {
  font-size: 20px;
  width: auto;
  padding: 5px;
  margin: 5px;
  text-decoration: none;
  color: white;
  text-align: center;
}
.nav a:hover,
.nav a:active {
  background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
  height: 70vh;
  width: 100%;
  position:fixed;
  top:40px;
  z-index:-1;
}
a {
  text-decoration: none;
}
.container {
  margin: 5%;
  background: white;
}
.personal_icon {
  margin: 5%;
}

<html>
<head>
  <title>
    Test
  </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
  <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
  <link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
  <link rel="stylesheet" href="grid.css">
</head>
<body>
  <div class="top">
    <div class="nav">
      <nav>
        <img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
        <a href="#" style="float:left; margin-top:0px; height:30px;">About Me</a>
        &nbsp;
        <a href="#" style="float:left; margin-top:0px; height:30px;">My Projects</a>
        &nbsp;
      </nav>
    </div>
  </div>
  <br>
  <div class="header">
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="section group">
      <div class="col span_2_of_12">
        <div class="userinfo">
          <img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
        </div>
      </div>
    </div>
  </div>
</body>
</html>

在玩了一会儿之后，我认为头部有问题。如果你给它position: fixed和z-index: -1，它是有效的。剩下的唯一问题是，你必须确保空间仍然存在。我推荐<div style="height: 70%"></div>

将z-index设置为1会有所帮助。

相关内容

最新更新

热门标签：