Tagged

960

A collection of 2 posts

960

960CSS框架基本原理

CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了。有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间。在此,我们将不再讨论这个问题。 前段时间,我了解到了CSS框架。经过对Malo、BluePrint和960做了实验对比后,我得出一个结论:我最喜欢960CSS框架。 本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发。 基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”。你可以通过实验(或者是用firebug)来学习它,不过我也将会在这里为你介绍它。让我们开始吧。 不要编辑960.css文件 首先是一个小提示:不要编辑960.css文件,否则,将来你将不能更新这个框架。因为尽管我们需要布局我们的HTML,我们将创建一个独立的CSS文件。 加载网格 因为我们可以使用一个外部文件的CSS代码,我们必须在我们的HTML网站中加载它们,我们可以通过以下代码来实现: <link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.

960

960 CSS框架解析及重构

960CSS框架是一个非常流行的CSS框架,它是国外最成熟的CSS框架之一,而且结构清晰,代码简洁,容易上手。 960的基本原理是网格技术,而且960是CSS 网格技术的最完美实现。 网格技术是最近两年才出现的一种网页布局方法,它的原理是将页面平均分割成N列,然后通过组合相应数量的列来完成对页面的布局。 关于网格技术的更多信息,请查看我之前写的《美丽网格》。 960的方法是,将页面平均分成12列或16列,然后列与列之间是完全独立的,每一列的margin和padding都是相同的,这样,每列之间就不会出现那些常见的bug。 BluePrint和YUI也有网格技术,但是它们的列与列之间的空白,是通过单边的margin来实现的,这样就需要在第一列或最后一列添加额外的样式。 然而,我之前也有一个关于网格框架的想法,后来发现与960差不多,而且在某些方面,它的实现比我的设想要好些。但是它也有点儿方法我觉得不是太 好,重用度不够,比如,对于每列的公用样式,它是通过.grid_1,.grid_2,.grid_3, …… .grid_16{display:inline;float:left;margin-left:10px;margin-right: