快捷搜索:  汽车  科技

栅格数据的管理模式有(栅格系统在设计中的要点总结)

栅格数据的管理模式有(栅格系统在设计中的要点总结)栅格布局设定后,可以很方便计算出每个模块内容的宽度在浏览器缩小时的栅格布局里,隐藏4列,内容2宽度变窄占10列,其他内容不变栅格布局完整内容展示布局:网页总宽度为1200,列数为24,水槽为10浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10

左淘宝、右京东

淘宝布局

下图包含:完整内容展示布局、浏览器缩小时内容展示布局。

淘宝布局分为4列内容:1、2、3、4,在浏览器缩小的情况下,内容3被隐藏

栅格布局

完整内容展示布局:网页总宽度为1200,列数为24,水槽为10

浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10

在浏览器缩小时的栅格布局里,隐藏4列,内容2宽度变窄占10列,其他内容不变

栅格数据的管理模式有(栅格系统在设计中的要点总结)(1)

栅格布局设定后,可以很方便计算出每个模块内容的宽度

栅格数据的管理模式有(栅格系统在设计中的要点总结)(2)

栅格的列数,根据具体内容设定。内容模块较多,建议等分列数多一些,容易布局;如果内容模块较少,等分列数也可以少一些,就像淘宝可以等分成24列,也可以等分成12列

栅格数据的管理模式有(栅格系统在设计中的要点总结)(3)

栅格布局设定为12列,每个模块内容的宽度和上面等分成24列的宽一样

栅格数据的管理模式有(栅格系统在设计中的要点总结)(4)

京东布局

下图包含:完整内容展示布局、浏览器缩小时内容展示布局

京东布局和淘宝布局一样分为4列内容:1、2、3、4,在浏览器缩小的情况下,内容3被隐藏

栅格数据的管理模式有(栅格系统在设计中的要点总结)(5)

猜您喜欢: