摘要:
本人转载于: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... 阅读全文