960网格布局的好教程？

<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。

<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

推拉

这是拉里！推拉是开发商想要重新排列搜索引擎优化页面。

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

通知的粉红色和黄色类如何反转，但是div的排列在相反的方式？

来源

2015-05-20 17:41:40

960网格布局的好教程？

回答

相关问题