如何制作一个居中的大 "main text column" 和两边不同背景的较小的空白网页？

Question

这听起来像是一个奇怪的问题，因为我真的不知道如何描述它，但我想做的是在我的网页两边都有 15% 的空 space。这在 Dreamweaver 中很容易实现，方法是在#body 的两侧设置 15% 的填充。但我希望两侧的空白 spaces 具有背景颜色...

例如，我希望页面的 "main part" 为白色，两侧的 15% 为浅蓝色。

此外，我想知道如何（而不是）使它影响 topbanner。我还没有决定是想让顶部的横幅横跨整个屏幕，还是像其他横幅一样居中。

谢谢！！！！

Answer 1

您可以通过将 div 放入包含 div 的内部来实现此目的。包含的 div 需要占页面宽度的 100%，里面的需要占页面宽度的 70%，margin: 0 auto 设置为居中，给你一个 15% 的间距。

body {
  background: skyblue;
  /* make background sky blue */
  padding: 0;
  /* remove normal browser padding */
  margin: 0;
  /* remove normal browser margin */
}
header {
  height: 50px;
  /* Just some predefined height */
  background: red;
  /* set a different background */
  margin: 0;
  /* remove spacing outside element */
}
.content {
  width: 70%;
  /* set width to 70% of page width */
  margin: 0 auto;
  /* set margin top & bottom to 0 but the the left and right will centre align */
  background: white;
  /* set white background */
  text-align: center;
  /* center the text */
}

<header>
  Left Blank
</header>

<div class="content">
  This is 70% of the width with 15% spacing on each side
</div>

如何制作一个居中的大 "main text column" 和两边不同背景的较小的空白网页？

How to make a webpage with a large centered "main text column" and two smaller empty ones on the sides with different backgrounds?

html

css

background-color