如何使用 div 将我的网站的 2 部分设为黑色，将网站设为白色答案

【问题标题】：How to make 2 parts my website black and one part white with div如何使用 div 将我的网站的 2 部分设为黑色，将网站设为白色
【发布时间】：2017-11-03 16:28:18
【问题描述】：

所以我一直在努力弄清楚如何将我的网站制作成两部分黑色和一部分白色。

例如，您访问该站点，上半部分是黑色的，然后中半部分是白色的，然后下半部分是黑色的。

我将如何使用 CSS 和 HTML 来做到这一点

我知道对于 html 我需要使用 div 元素但不知道如何去做。

【问题讨论】：

标签： html css layout formatting

【解决方案1】：

试试这个。

body{
  margin:0;
}
.wrap {
  height: 100vh;
}
.black{
  background:#000;
  height:33.33%;
  width:100%;
}
.white{
  background:#fff;
  height:33.33%;
  width:100%;
}

<div class="wrap">
  <div class="black">black part</div>
  <div class="white">white part</div>
  <div class="black">black part</div>
</div>

【讨论】：

【解决方案2】：

html:

<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>

css:

#header{
width:100%;
height:33%;
background-color:black;
}
#content{
width:100%;
height:33%;
background-color:white;
}
#footer{
width:100%;
height:33%;
background-color:black;
}

【讨论】：

好的，我的主页我想使用一张图片但是当我使用背景尺寸时：封面；以及 url 链接后的不重复，以想象它的模糊和讨厌。我该如何改变呢？
这取决于图像的分辨率。您能否更具体地说明您的要求，例如，您希望图像在哪里？
我希望想象覆盖整个网站。它用于着陆页。
这完全取决于图像分辨率。但是你可以试试这个：background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size：封面； /* 对于 WebKit*/ -moz-background-size: cover; /* Mozilla*/ -o-background-size: 封面； /* Opera*/ 背景尺寸：封面； /* 通用*/