🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、电商网站 ![](http://cndpic.dodoke.com/017980a4f01d0d8b8ee394ffa8c9ff3d) ### 1、淘宝布局 下图包含:完整内容展示布局、浏览器缩小时内容展示布局。淘宝布局分为4列内容:1、2、3、4,在浏览器缩小的情况下,内容 3 被隐藏。 ![](http://cndpic.dodoke.com/ab97e423afc2190190d76f856e369499) #### 栅格布局 * 完整内容展示布局:网页总宽度为1200,列数为24,水槽为10。 * 浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。 在浏览器缩小时的栅格布局里,隐藏4列,内容2宽度变窄占10列,其他内容不变。 ![](http://cndpic.dodoke.com/ade61edbdd9ef6b8580265615e9212ae) 栅格布局设定后,可以很方便计算出每个模块内容的宽度。 ![](http://cndpic.dodoke.com/8337f304b86eff8d2ee1d60ef16ede04) 栅格的列数,根据具体内容设定。内容模块较多,建议等分列数多一些,容易布局;如果内容模块较少,等分列数也可以少一些,就像淘宝可以等分成24列,也可以等分成12列。 ![](http://cndpic.dodoke.com/113d0f93cd3d683286fc319504a3a09a) ### 2、京东布局 下图包含:完整内容展示布局、浏览器缩小时内容展示布局。京东布局和淘宝布局一样分为4列内容:1、2、3、4,在浏览器缩小的情况下,内容 3 被隐藏。 ![](http://cndpic.dodoke.com/9cb1c6982d355797115a22ba0ce6db28) #### 栅格布局 * 完整内容展示布局:网页总宽度为1200,列数为24,水槽为10; * 浏览器缩小时内容展示布局:总宽度为990,列数为20,水槽为10。 在浏览器缩小时的栅格布局里,隐藏4列,其他内容不变。 ![](http://cndpic.dodoke.com/3afa521b95f924e5a212f3c961ab03a5) 京东栅格布局,每个模块内容的宽度如下图。 ![](http://cndpic.dodoke.com/2e4fecf38cd16b6d1a2f3c4ce0bad71b) 栅格的列数,根据具体内容设定。京东网页等分成24列,也可以等分成12列。 ![](http://cndpic.dodoke.com/74c98164617c03202841257f034fc10c)