演练 小米商城 手机版块 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