Question

这可能听起来像一个奇怪的问题，因为我真的不知道如何描述它，但我想做的是在我的网页的两边都有15％的空白空间。通过在#body的两侧设置15％的填充，可以在Dreamweaver中轻松实现。但我希望两侧的空白区域有背景颜色......

因此，例如，我希望页面的“主要部分”为白色，并且两侧的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>

如何制作一个带有大中心“主文本列”的网页和两个不同背景的小空页？

1 个答案: