html - 如何使用固定网格蓝图在 CSS 设计中显示 100% 宽度的条纹？

Question

不确定标题是否真的描述了我正在尝试做的事情。实际上，这是在互联网上非常简单和广泛的用法：

当我的内容使用蓝图固定网格时，我希望在背景中有一些流动/全宽的条纹（与设计的某些 div 的高度相同）。

例如，这个网站：intient.com正是我正在寻找的。一个黑色的背景条纹（另一个是灰色的），它是液体宽度和使用网格的内容（但在查看 CSS 后不是蓝图）

我正在使用蓝图固定宽度网格 (950px) 来显示任何内容。你知道我该怎么做吗？用蓝图？并且没有静态背景图片...

谢谢

Answer 1

在蓝图中，您可以这样做：

<div class="stripeContainer">
   <div class="container">
     <div class="span-8">Column 1</div>
     <div class="span-8">Column 2</div>
     <div class="span-8 last">Column 3</div>
   </div>
</div>
<div class="container">
  <div class="span-12">Body goes here</div>
  <div class="span-12 last">Some sort of menu perhaps</div>
</div>

然后你风格.stripeContainer：

.stripeContainer
{
    width: 100%; /* this is usually implied */
    background-color: pink;
}