如果没有了解栅格系统是什么,建议 看完这篇文章 以后再回来。
其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(譬如: YUI , BluePrint )。
引用 One True Layout 文中所言,良好的布局应该具有的几个特性:
- 具有一定的灵活性
- 等高
- 基于栅格
请允许我「重复造了轮子」,我的栅格系统实现是基于 「伪绝对定位布局」 ,这样可以更好的实现上述所言的几个特征(很难解释,还是直接看 DEMO )。
http://friable.rocks/grids/index.html 定义的 950px 宽度为公式 W )
column-24 start-01
因为是上述「伪绝对定位」的布局,所以相应列之间不会相互影响。而理解上述布局可能需要些时间,同时感谢师兄那么详细的讲解,我相信也会给你带来收获。
- 黄金分割标准:右边的大小一般是左边大小的黄金比例
- 平分:在1024的分辨率下,一般采用330左右的分割
- 两栏分割:左边660 右边260左右
- 三栏分割:左边是200左右 中间400左右 右边300左右
- 三栏分割:右边两栏之和是左边的0.618
- 三栏分割:中间180 两边分别为380左右
很难具体的解释其中的细节,但是希望有问题的朋友能够留言,我尽量帮你解答。
很好,受教了。^______^
知道并了解这个栅格化的计算公式,但是对于应用还是觉得有点模糊,感觉处于混沌中,缺点什么来点通它。看了UED的文章开始就有点混沌,看了你的文章也仍是混沌中,也许正如你所说的,其中的细节很难解释出来。
有个比较严重的问题,在ie6下浮动元素需要position:relative;才能显示。
所以类似的方法,还是不要写的太灵活,不然多处使用会给后期带来一定的痛苦.
呵呵,受教了,听了很多新名词~~~
另外BluePrint 的连接有问题,多三个w
那个....
标准只是我自己参考其他的网站自己总结的....
算不得真正的标准....
PS...为什么要删除呢?
太在意杂音了反而听不到真正的音乐了
留个脚印吧。
除了很好,很强大。再无其他感想~
@Rage 这布局虽然灵活性较大,不过也如原文的作者所言,唯一“不放心”的就是缺乏长期使用的“稳定性”。不过我们至少可以尝试下(如果你能在首页尝试下,玉溪大大的伺候)。
@Missx 蓝色个人感觉不像以前那样有“学术”的氛围了,潜水 N 久发了篇结果是这样,不得不让人心寒。
我这个人一向 BS 绝对定位.
还是比较喜欢table.哈哈,你这个文章好象把原文的意思给那啥了...
@手气不错
整个互联网的学术氛围都没有以前浓厚了,难道我们就不在互联网上讨论了?
最终还是要形成圈子型的讨论,所以才有了home.blueidea.com
很强悍!~受教了
不知道CSS什么时候可以有乘法那就好算多了!~要不还是得写很多,有些根本用不上
最好把那些程序里面的算法如逻辑与、或。还有条件、循环都用上
受教了,不是很明白...