演练 小米商城 手机版块 0920

演练 小米商城 手机版块 0920

参考效果

https://www.mi.com/

目标效果

盒子分析

三个级别的盒子

最外层盒子，红色

二级盒子，黄色

商品盒子，蓝色

01 盒子的测量

最外盒子的宽度值 1240

1240的盒子宽度

左侧盒子的宽度 248

14+234 = 248

右侧盒子宽度 992

992 = 14+978

02 右盒子内部商品盒子的尺寸测量

li容器的大小 248，共四个

每一个li盒子的占位是

14+234 = 248

248*4 = 992等于右边盒子的宽度

高度260，填充上下20

03 盒子尺码小结

04 实现盒子布局

05 实现内部盒子的布局

重点与难点。。。。

最终实现效果

源码

https://cloud.189.cn/t/Bz2A3yRZBrUb