响应式网站html/css

我已经开始尝试构建一个非常简单的网站并尝试使其响应。在http://www.squarespace.com/风格的东西（拆分在不同背景的不同部分，你只是滚动通过）但我有一个问题，我真的不知道现在，我不知道如何做这种基础现场。我得到了“菜单”部分相当不错，但只要我尝试，但第一个“部分”的一些内容或尝试开始第二部分，我遇到了麻烦。响应式网站html/css

试图解释我有两个< 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/

来源

2016-02-03 Nick3

由于main-container图像没有被设置为背景图像和它涉及在源代码中的段落，则出现在段落的前上方。

两件事情你可以做的就是段落显示：

1）把段落样式的位置属性，使其出现在图像的顶部：

div.container p{position:relative;}

2）I会建议将该图像设置为您的容器的背景并将其设置为最小高度（以防您的内容不会增加容器大小以便完全看到图像）。像这样：

<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;">

然后，请务必关闭main-container打开second-container之前，这样它会创建一个干净节不同的内容。您拥有它的方式是，second-container位于main-container之内，您希望显示在主背景下的所有内容和顶级内容实际上只会出现在main-container背景的顶部。

您链接到的Squarespace站点是一个很好的示例，但如果您检查他们的代码，它会让初学者感到困惑，因为他们在section之内嵌套底部部分（在视频演示文稿下方） div。

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

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

我不是引导的倡导者，因为它增加了在大多数情况下很多不必要的膨胀，但这些给出了如何一个很好的迹象构建你的页面。

祝你好运！

来源

2016-02-03 13:54:43 CreMedian

谢谢！这帮助我继续前进！ – Nick3

响应式网站html/css

回答

相关问题