960网格布局的好教程？ [关闭]答案

【问题标题】：good tutorials for the 960 grid layout? [closed]960网格布局的好教程？ [关闭]
【发布时间】：2010-01-19 06:00:15
【问题描述】：

我想使用 960 网格系统为我的网站生成布局。我从他们网站的自定义生成器下载了 24 列流体版本。

现在我想知道我可以用它做的每一件小事。我查看了 css 文件，发现了一些类名，例如 .suffix_x .prefix_x .push_x .pull_x .clear .clear_fix 等

我在哪里可以找到解释所有这些的教程？如何制作leftbar、main div等。

奇怪的是它没有教你如何在他们的网页上实际使用网格系统。而且我在 google 上找不到解释所有内容的好教程。

如果有人能推荐这样的教程，那就太好了。

如果你们中的一些人使用过 960 流体网格系统，那么也可以提供优秀教程的链接。

【问题讨论】：

标签： css 960.gs

【解决方案1】：

their site 的最底部有一些教程链接。

我想你会发现this Nettuts+ one 玩 960 很有价值。

【讨论】：

【解决方案2】：

看看：

http://www.myinkblog.com/2009/02/24/design-a-fresh-blog-theme-on-the-960-grid/

这很好地概述了使用 960 网格系统并逐步应用它。

【讨论】：

但是他们在哪里解释了您可以使用的所有选择器：.suffix_x .prefix_x .push_x .pull_x .clear .clear_fix

【解决方案3】：

我今天刚看了这个，它非常有帮助。视频形式：

http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/

如果您想添加填充，他甚至会教授意外情况。

【讨论】：

【解决方案4】：

我认为我找到的最好的是：
http://net.tutsplus.com/tutorials/html-css-techniques/mastering-the-960-grid-system/

详细为您展示960的每一项功能。

【讨论】：

【解决方案5】：

net tut 的文章很好，但我还有一些要分享。学习 Grid960 对我来说非常痛苦。其中大部分是在重申 net tuts 文章。这为新手提供了直觉，因为它是如此令人头疼：

概要

报纸和杂志使用中间有排水沟的网格系统，当您使用设计技术时，它使页面看起来更加赏心悦目。网格将完美地引导您。在开始之前，您必须了解 CSS/HTML 嵌套。

<div class="a">
I include all the items A.
<div class="b">
    I include all the items of B with all of A.
</div>
<div class="c">
    I include all the items of C with all of A. B is not here, but it is on the same level.
    <div class="d">
        I include all the items of A with C and D
    </div>
</div>

查看示例文件，了解如何将设计分解为网格。

在 Chrome + IE + Firefox 中按 F12 使用检查器（感谢拉里！）。突出显示这些框以查看 CSS 是如何编辑的。我发现很难直接进入 Grid960 的 css 文件。您将看到每个网格是如何创建的

声明一个 12 大小的网格作为父 div。子 div 的总和必须为 12，您可以按照自己的方式拆分页面。示例：3 格 + 3 格 + 6 格 = 12 格。 3格+4格+4格+1格=12格。如果您在 Chrome 中使用 F12，您可以看到这一点。突出显示示例文件中的网格。当您完成一行并想要开始新的一行时，不要忘记添加 div clear。

<div class="container_12">
<div class="grid_12"><a href="images/header.png" alt=""></a></div>
<div class="clear"></div>


<div class="grid_12" id="navbar">A</div>
<div class="clear"> </div>

<div class="grid_7">B</div>

<div class="grid_5">C</div>
<div class="clear"></div>

<div class="grid_12 spacer">D</div>
<div class="clear"></div>


<div class="grid_3">E</div>
<div class="grid_3">F</div>
<div class="grid_3">G</div>
<div class="grid_3">H</div>

<div class="clear"></div>

<div class="grid_12 spacer">I</div>
<div class="clear"></div>

<div class="grid_4">J</div>

<div class="grid_4">K</div>
<div class="grid_4">L</div>

</div>

后缀和前缀：

假设您希望网格从中间开始。仅声明网格 3 是不够的。你需要给它一条额外的信息，说明我希望它“浮动”。这就是后缀和前缀的来源。前缀表示跳过 x 个 div，后缀表示跳过其后的 x 个 div。

来自网络图

阿尔法和欧米茄：

如果我想应用一种样式并让它覆盖多个网格包括排水沟空间。 Alpha 是第一个，omega 是它应用到的最后一个 div。

来自网络图

推拉

这是给拉里的！ Push and pull 适用于希望为 SEO 重新排列页面的开发人员。

http://www.clubosc.com/960-grid-tutorial-understanding-push-and-pull-classes.html

注意粉红色和黄色类是如何颠倒的，但是 div 以相反的方式排列？

【讨论】：