【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )
文章目录
- 一、案例效果
- 二、案例分析
- 三、布局测量摆放
- 四、完整摆放效果
一、案例效果
使用 浮动 布局 , 实现下面的 京东商城 首页 的局部界面 ;
完整的布局样式 , 仅做参考 ;
二、案例分析
整体标准流布局 : 整个布局 是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该 块级元素 盒子 居中对齐 , 在浏览器中心位置显示 ;
整体 标准流 布局 作为父容器 , 内部放置 3 个浮动布局 , 前两个浮动布局是普通的 尺寸精准测量 : 将图片拖到 PhotoShop 中 , 测量尺寸 ; 整体尺寸 1190 x 370 像素 ; 盒子1 和 盒子2 尺寸 290 x 370 像素 , 中间还有 10 像素间隔 ; 盒子3 尺寸 600 x 370 , 无序列表 包括 10 像素的间隔 ; 这样 无序列表 中每个列表项 左侧 和 底部 都有 10 像素外边距 ; 列表项 290 x 180 , 加上两个 10 像素间隔 , 宽度正好是 600 像素 ; 将 除外部 box 之外的 所有的 盒子模型 , 都设置为浮动元素 , 进行从左到右摆放 , 可以达到案例要求的摆放效果 ; 代码示例 : 显示效果 : 在盒子模型中 , 放入 设置图片 , 然后设置 body 背景 , 取消 盒子模型 中的背景 , 即可得到案例要求的布局样式 ; 代码示例 : 显示效果 :
默认是块级元素 , 每个列表项占用一行 , 设置成 浮动元素 后 , 该列表项的显示模式 变为 行内块元素 模式 , 以网格的形式排列 ; 列表项默认左侧带一个原点 , 使用下面的样式 , 去除默认的左侧原点 ; li {list-style: none;}
三、布局测量摆放
四、完整摆放效果
img {width: 100%;}
相关内容