15

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

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

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

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

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

如果你们中的一些人使用过 960 流体网格系统，那么如果有很好的教程链接也会很棒。

4

5 回答 5

9

在他们网站的最底部，他们有一些教程链接。

我想你会发现这个 Nettuts+ 是玩 960 的价值之一。

于 2010-01-19T06:03:31.260 回答
2

看一眼：

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

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

于 2010-01-19T06:03:24.663 回答
2

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

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

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

于 2010-07-27T21:40:34.700 回答
0

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

它详细地向您展示了960的每一项功能。

于 2012-05-24T17:23:09.257 回答
0

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。

来自网络 tuts

阿尔法和欧米茄：

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

来自网络tuts

推和拉

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

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

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

于 2015-05-20T17:41:40.457 回答