摘要：
本人转载于：http://www.gracecode.com/archives/2363/如果没有了解栅格系统是什么，建议看完这篇文章以后再回来。其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如：YUI，BluePrint）。引用 One True Layout 文中所言，良好的布局应该具有的几个特性：具有一定的灵活性 等高 基于栅格 请允许我“... 阅读全文
摘要：
本文转载于：http://www.twinsenliang.net/skill/20081109.html首先这是一篇让你知其所以然的文章，如果你不了解栅格化你应该看看，如果你很了解栅格化你更加应该看看。 事情的起因：今天帮跑去跟小组争取福利，和领导谈话。我说小组对于那种虚名的表扬最近不太感冒，最好来点实质的奖励。他就说什么技术提升之类远景什么的，让大家为了理想去工作。我说我们组总体水平已经是重构... 阅读全文
摘要：
转自：http://ued.taobao.com/blog/2008/11/05/grid_system_research_4/前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：以上三栏布局的代码为：上面是基本功能，Blueprint还支持ap... 阅读全文
摘要：
转自：http://ued.taobao.com/blog/2008/10/28/grid_system_research_3/研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：（图1）纷乱... 阅读全文
摘要：
首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应... 阅读全文
摘要：
研究网页栅格系统前，来看一组数据：网站首页页面宽度 pxYahoo!950淘宝950MySpace960新浪950网易960Live Search958搜狐950优酷960AOL960上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。再来看看Google, Yo... 阅读全文