当前位置:清晨 » 栅格系统

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

    2014年02月27日 | 作者: 影子 | 评论数:0

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

    标签:,

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

    2014年02月27日 | 作者: 影子 | 评论数:0

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

    标签:,

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

    2014年02月27日 | 作者: 影子 | 评论数:0

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

    标签:,