## 一、电商网站  ### 1、淘宝布局 下图包含：完整内容展示布局、浏览器缩小时内容展示布局。淘宝布局分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容 3 被隐藏。  #### 栅格布局 * 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10。 * 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。 在浏览器缩小时的栅格布局里，隐藏4列，内容2宽度变窄占10列，其他内容不变。  栅格布局设定后，可以很方便计算出每个模块内容的宽度。  栅格的列数，根据具体内容设定。内容模块较多，建议等分列数多一些，容易布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以等分成24列，也可以等分成12列。  ### 2、京东布局 下图包含：完整内容展示布局、浏览器缩小时内容展示布局。京东布局和淘宝布局一样分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容 3 被隐藏。  #### 栅格布局 * 完整内容展示布局：网页总宽度为1200，列数为24，水槽为10； * 浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。 在浏览器缩小时的栅格布局里，隐藏4列，其他内容不变。  京东栅格布局，每个模块内容的宽度如下图。  栅格的列数，根据具体内容设定。京东网页等分成24列，也可以等分成12列。