初识“960”css框架

是时候使用CSS框架了。尽管时光飞逝,我这对于CSS兼容性的恐惧依然没有很好的应对方法。对于我这种偶尔写写代码的人来说,通过学习一个相对规范的CSS框架,也有助于我更好的认识css的复位、思考模式、兼容性技巧。

通过初步了解(2-3个小时的时间),归纳出了三个常见的CSS框架:yuml、blueprint、960。yahoo的YUI看上去比较恐怖,于是算了。

yuml是德国货,看上去非常全面,从固定布局到可变布局通吃,相对来说blueprint和960就小得多,而且是固定布局。这两个框架都比较活跃,而且几乎是同时出现,但是blueprint是950宽度的设计,个人比较不习惯,于是偏向于选择960框架。960基本满足了我现阶段的需求:简单,而且仅面向布局设计,设计思路比较容易搞清楚,英文注释比较浅显,复位样式和兼容性设计都不差。于是将学习心得做一个笔记。

【文件夹】

下载回来的960框架压缩包,包含以下目录:

app_plugins:应用程序插件。960针对fireworks和photoshop制作了动作插件,运行这个定制的动作,你就可以马上得到一个设计模板,立刻开始工作。(对于中国用户来说,fireworks完全可以忘记了,自从并入ADOBE那天起,他的命运就被定格在了“被放弃”上。)

code:CSS框架的代码部分。这个目录是960框架的核心。

licenses:作者自己也不知道许可协议实施是啥玩意,这种法律文书对于他来说没什么意义。于是他把两个开发性的许可协议都放在了自己的作品中,目的就是:你随便怎么用。

sketch_sheets:手绘草稿纸。这个目录下有一个PDF文件,你可以把他打印出来,这样可以方便你用笔构思你的设计布局时用。

templates:针对12种常见的设计和应用软件制作的格子模板。作者想得挺周到。用这些模板不仅可以设计网页布局,其实对其他设计也可以有辅助作用,从平面设计的角度看,栅格化设计的道理其实都是一样的。

README.txt:说明文件,后面会提到。

【code文件夹成份详解】

code目录下包含的文件众多,但是并非所有文件都要用上。

通过观察会注意到,有一半的文件名会加上“rtl_”前缀。这是因为960设计方法为了兼顾全面,分为了左浮动和右浮动两种。左浮动的是默认设计方式,是没有前缀的;而“rtl_”前缀代表是右浮动。按照官方说明,右浮动是为那些从右往左读的语言准备的。

.html文件是代码的演示,只作为参考,并不是核心。IMG目录下的图片也是为了演示用的,实际使用中不需要。

为了减少传输体积,960的默认CSS文件是经过压缩的。CSS目录中有个uncompressed目录,在这个目录中,CSS是没有经过压缩,方便阅读的模式。两者文件名相同,其执行结果也是等价的。可以选择性使用或者混用。

960框架刚开始的时候,只有12分隔和16分隔两种模式,后来为了加大灵活度,又加入了24分隔。于是就有了两种文件名960.css和960_24_col.css。如果使用12或者16分隔的模式,就使用960.css,如果是24分隔,就使用960_24_col.css。在国内,24分隔相对实用。12、16分隔的间距大,是很欧美的那种简约风格,遇到稍微麻烦点的客户,就很难得到认可。

reset.css是一个复位样式表文件。包含了让所有浏览器统一初始样式的CSS内容,并且包含了清除浮动的属性。text.css是一个文本设定文件。内容对于中文来说不实用,他不是960框架的核心,可以不使用。

【具体使用】

其实看完了才发现,960其实本身没什么玄妙,就是一个稍微严谨的布局思路。使用格子类来直观地编写大小和定位属性。并且用了一对标签来消除左边或者右边的外边距。使用了两组标签来做格式化的内填充,还用了另外两组标签来进行相对定位。几乎没什么可以说的,如果你能读懂CSS,那么不需要说;如果你读不懂CSS,那么说了也白说。

英语从来就不及格的我翻译了960代码中的注释,看完应该就全明白了,如果有理解错误欢迎留言指出。文件压缩包解压密码为本BLOG的域名(不含http://)

960css框架中文注释版

《初识“960”css框架》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注