文章目录
一、案例效果
二、案例分析
三、布局测量摆放
四、完整摆放效果
一、案例效果
----
使用 浮动 布局 , 实现下面的 京东商城 首页 的局部界面 ;
完整的布局样式 , 仅做参考...;
二、案例分析
----
整体标准流布局 : 整个布局 是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该 块级元素 盒子 居中对齐 , 在浏览器中心位置显示 ;
整体 标准流 布局...作为父容器 , 内部放置 3 个浮动布局 , 前两个浮动布局是普通的 块级元素 , 第三个浮动布局是 无序列表 ;
无序列表 是一个容器 , 内部的 默认是块级元素...像素 , 中间还有 10 像素间隔 ;
盒子3 尺寸 600 x 370 , 无序列表 包括 10 像素的间隔 ; 这样 无序列表 中每个列表项 左侧 和 底部 都有 10 像素外边距 ;
列表项...290 x 180 , 加上两个 10 像素间隔 , 宽度正好是 600 像素 ;
三、布局测量摆放
----
将 除外部 box 之外的 所有的 盒子模型 , 都设置为浮动元素 , 进行从左到右摆放