当前位置:首页 > 标签 > 栅格系统
运行天数:3000 天 最后更新:2020-7-7

网页栅格系统研究(4):技术实现

2014年02月27日 | 点击量: 1,866

前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。 Blueprint的实现 Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能。我们来看demo页面: 采用浮动来实现布局,简单明了 950两侧没有margin, 最后一列的class需要加上last 采用额外标签来清除浮动 960.gs的实现 谈到960栅格系统,不得不提960.gs. Nathan Smith在这篇文章中,详细阐述了他的想法和设计思路。这里有个demo页面,核心代码很简单: 以下为引用的内容:   上面就构建了三栏布局: 有意思的几点: margin是均匀放在950两侧的 所有grid除了宽度不同,左右......
关键词:,
详细阅读

网页栅格系统研究(3):粒度问题

2014年02月27日 | 点击量: 2,013

目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例): (图1) 纷乱的高度世界 我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格(不可避免的要调整内容,比如人气宝贝中将只能放下3张图片)。来仔细看下高度方向: (图2) 高度方向的布局是:90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显,高度方向没有任何栅格化的迹象。实际上, 即便是严格遵守栅格系统的Yahoo!首页,高度方向上也没有严格栅格化。 这究竟是为何? 一切皆有可能 我们缩小关注点: (图3)......
关键词:,
详细阅读

网页栅格系统研究(2):蛋糕的切法

2014年02月27日 | 点击量: 1,720

首先澄清一个应用场景问题。研究(1)中指出,对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局。但要注意的是,960并不是万能钥匙,大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局,最大限度的呈现信息。Google更是简简单单,主题部分就一个列表。eBay的页面非常简洁,商品页面宽度自适应,信息自然流畅,噪音少,购物很踏实。类似的站点还有很多,对于这些站点来说,宽度自适应布局更受青睐。 有个很有意思的网站是Yahoo!, 看起来是固定宽度布局,实际上在CSS中只要去掉一行,就能摇身一变自适应宽度了: 以下为引用的内容: #page { width: 70em; } 为......
关键词:,
详细阅读