用户登录

禁止注册!| 忘记密码?

分类:《网页栅格系统》

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

前三篇文章中,明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。 Blueprint的实现 Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能。我们来看demo页面: 采用浮动来实现布局,简单明了 950两侧没有margin, 最后一列的class需要加上last 采用额外标签来清除浮动 960.gs的实现 谈... 网页栅格系统研究(4):技术实现

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

目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例): (图1) 纷乱的高度世界 我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格(不可避免的要调整内容,比如人气宝贝中将只能放下3张图片)。来仔细看下... 网页栅格系统研究(3):粒度问题

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

首先澄清一个应用场景问题。研究(1)中指出,对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局。但要注意的是,960并不是万能钥匙,大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局,最大限度的呈现信息。Google更是简简单单,主题部分就一个列表。eBay的页面非常简洁,商品页面宽度自适应,信息... 网页栅格系统研究(2):蛋糕的切法

网页栅格系统研究(1):960的秘密

研究网页栅格系统前,来看一组数据: 网站       首页页面宽度 px Yahoo!     950 淘宝        950 MySpace     960 新浪        950 网易      960 Live Search   958 搜狐         950 优酷      960 AOL      960 上面列举的都是Alexa全球排名前100的站点,它们的首... 网页栅格系统研究(1):960的秘密