减小正文宽度并添加 HTML 背景

【问题标题】：reduce width of body and add a HTML background减小正文宽度并添加 HTML 背景
【发布时间】：2015-05-21 21:52:07
【问题描述】：

我试图通过将它放在一个容器中来减小我的身体宽度，这样我就可以在身体的每一侧看到两条条纹（我认为这将是我的 HTML 的背景）？？

这是我想要的一个例子：http://www.colingrist.com/ .. 展开窗口时，可以看到body只占据了页面的中间，然后就可以看到HTML的背景了...

我应该调整主体或容器的边距或内边距吗？

【问题讨论】：

根据您提供的网站的实现，您应该在<body> 上放置一个背景，并为您的容器添加左右边距。
所以我在上添加了白色背景，在上添加了灰色背景。然后我在的左侧和右侧添加了 -30% 的边距，但我仍然看不到背景的灰色...现在右侧比左侧宽得多，在我的 .hero 一边...
两边的正边距。负边距会将容器的边缘推离屏幕，这与您想要的相反。

【解决方案1】：

您可以通过使用 section 或 div 标签来做到这一点，就像您提供的示例一样。

例如，

<body>
  <div>
    ..Your Content..
  </div>
</body>

在您的 css 文件中，您可以使用以下内容：

div{
  width: /*your specified width here*/
  margin: 0 auto
}

margin: 0 auto 将使页面中的 HTML 元素居中并防止其拉伸。在您提供的网站中，作者使用了一个部分而不是一个 div。

如果您希望您的网站具有响应性，我建议您使用 Bootstrap。 http://getbootstrap.com/getting-started/

另外，避免将内容放在正文标记之外。 body 标记之外的内容不是有效的 HTML。

【讨论】：