如何制作一个大"main text column"和两侧两个具有不同背景的较小的空的网页？

Question

这听起来可能是一个奇怪的问题，因为我真的不知道如何描述它，但我想做的是在网页两侧留出15%的空白。在dreamweaver中，通过在#主体两侧设置15%的填充，可以轻松实现这一点。但我希望两边的空位有背景色。。。

例如，我希望页面的"主要部分"是白色的，两侧的15%是浅蓝色的。

此外，我想知道如何（和不）使这影响顶部横幅。我还没有决定是希望顶部的横幅延伸到整个屏幕上，还是像其他横幅一样居中。

谢谢

Answer 1

您可以通过将div放在包含的div中来实现这一点。包含的div需要是页面的100%宽度，而里面的div需要为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>