1

我正在使用 960 网格系统进行网站设计，我希望能够更改特定列的背景颜色。我已经想出了如何通过执行类似的操作来更改整个容器的背景颜色

.container_12 {
  background-color: #000000;
  overflow: hidden; /* so that the margin is transparent */
}

但是，如果我想更改 1-3 列的背景颜色怎么办？我希望颜色一直到容器的底部。

例子。假设我有一些 html，例如：

<div class="container_12">
  <div class="grid_4 alpha"> a </div>
  <div class="grid_4"> b </div>
  <div class="grid_4 omega"> c </div>
  <div class="grid_1 alpha"> A </div>
  <div class="grid_10"> B </div>
  <div class="grid_1 omega"> C </div>
</div>

我想对其进行样式设置，以便第 1-3 列具有给定的背景颜色。这意味着a div、A div 的前三列和B div 的前两列将具有这种颜色。基本上我想设置列的样式，而不是网格。这可能吗？

4

3 回答 3

1

你可以这样做：

.grid_4.alpha, .grid_1.alpha {
    background-color: blue;
}

.grid_4, .grid_10 {
    background-color: red;
}

.grid_4.omega, .grid_1.omega {
    background-color: green;
}

工作示例：http: //jsfiddle.net/fewds/tnMhc/

于 2012-12-28T01:36:49.893 回答
1

我不确定我是否理解正确，也不熟悉 960gs 框架。我认为列是根据百分比调整大小的，在这种情况下，我认为我的解决方案会起作用。此外，您的容器需要具有固定的高度，以便从上到下着色。

所以诀窍是：

  • 在你的 container_12 中，放一个空的  
  • 将其高度设置为 100% 并将背景设置为任何值
  • 将其设置为 margin-right ，使其正好等于其宽度的反面

看看这个http://codepen.io/joe/pen/bwBky

于 2012-12-28T02:20:31.943 回答
1

我认为这里发生的事情是您对网格系统的想法并不完全是它们的预期用途。这很好，因为我最近才开始使用网格系统！

网格系统旨在为您的内容提供结构，而不是样式。

.grid_4, .grid_8, 和.grid_12是列，而不是单元格。如果您希望diva 和divA 在第一列，您可以将它们一个接一个地放在.grid_4 alpha.

并且由于网格系统并不意味着样式，您应该避免样式化网格 CSS，而是创建自己的样式。

所以你的 HTML 最终看起来像这样：

<div class="container_12">
  <div class="grid_4 alpha red-column">
    <div>Content-a</div>
    <div>Content-A</div>
  </div>
  <div class="grid_4 green-column">
    <div>Content-b</div>
    <div>Content-B</b>
  </div>
  <div class="grid_4 omega blue-column">
    <div>Content-c</div>
    <div>Content-C</div>
  </div>
</div>

然后您将其添加到您的 CSS 中：

.red-column {background-color:#f00;}
.green-column {background-color:#0f0;}
.blue-column {background-color:#00f;}
于 2012-12-28T08:33:24.100 回答