css - 响应式网站 html/css

Question

我已经开始尝试构建一个非常简单的网站并尝试使其具有响应能力。类似 http://www.squarespace.com/ 的东西(分成具有不同背景等的不同部分，您只需滚动浏览)但我有一个问题，我现在真的无法弄清楚，我不知道如何为这种网站打下基础。我得到的“菜单”部分非常好，但是当我尝试在第一部分中添加一些内容或尝试开始第二部分时，我遇到了麻烦。

为了解释，我有两个 < p >，我试图将它们放在第一部分的顶部，并在下面制作第二部分。我想这个解释并不完美，但希望代码可以稍微解决我的问题 :)

编辑:随便拍了一些照片来展示...

#logo img{
  z-index: 10;
  left: 4%;
  top:20px;
  max-width: 50%;
  height: auto !important;
  position: absolute;
}

#signup img{
  z-index: 10;
  right: 4%;
  top:20px;
  max-width: 50%;
  height: auto !important;
  position: absolute;
}

#main-container img {
  width: 100%;
  height: 100%;
  max-height:308px !important;
  position: absolute;
  top: 0;
  left: 0;
  margin:0;
}
#second-container { 

}

<div class="container">
  <div id="menu">
    <div id="logo">
      <a href="example.com">
                <img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
      </a>
    </div>

    <div id="signup">
      <a href="example.com">
        <img src="https://tcrf.net/images/d/de/FBEAR-nosave.png" alt="" />
      </a>
    </div>
  </div>
        
  <div id="content">
    <div id="main-container">
      <img src="http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png" alt="" />
    </div>
    <p>Ontop of background</p>
    <div id="second-container">
      <p>Under background</p>
    </div>
  </div>
</div>

https://jsfiddle.net/gt2d6aa7/

Answer 1

由于 main-container 中的图像未设置为背景图像，并且它出现在源代码中的段落之前，因此它出现在段落的顶部。

为了显示段落，您可以做 2 件事:

1) 在段落样式上设置一个位置属性，使其显示在图像的顶部:

div.container p{position:relative;}

2) 我建议将该图像设置为容器的背景并为其设置一个最小高度(以防您的内容不会增加容器的大小足以完全看到您的图像)。像这样:

<div id="main-container" style="background-image:url('http://www.reallifeglobal.com/wp-content/uploads/2015/03/background-radi-700x300.png');background-size:100%;min-height:300px;background-repeat:no-repeat;">

然后，确保在打开 second-container 之前关闭您的 main-container，这样它会为不同的内容创建一个干净的部分。按照您的方式，second-container 位于 main-container 内，您希望显示在主背景下方的任何内容和顶部内容实际上只会显示在顶部main-container 背景。

您链接到的 Squarespace 网站在视觉上是一个很好的例子，但如果您检查他们的代码，初学者会有点困惑，因为他们将底部部分(在视​​频演示下方)嵌套在 部分 在 div 中。

Twitter Bootstrap 有一些很好的单页布局示例，后面还有更清晰的标记。这是一个很好的例子:http://blackrockdigital.github.io/startbootstrap-landing-page/

这是他们的其他示例:http://startbootstrap.com/template-categories/one-page/

我不是 Bootstrap 的拥护者，因为在大多数情况下它会增加很多不必要的膨胀，但这些可以很好地指示如何构建您的页面。

祝你好运!