文章目录
一、案例效果
二、案例分析
三、布局测量摆放
四、完整摆放效果
一、案例效果
----
使用 浮动 布局 , 实现下面的 京东商城 首页 的局部界面 ;
完整的布局样式 , 仅做参考...整体标准流布局 : 整个布局 是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该 块级元素 盒子 居中对齐 , 在浏览器中心位置显示 ;
整体 标准流 布局 作为父容器 , 内部放置 3 个浮动布局..., 前两个浮动布局是普通的 块级元素 , 第三个浮动布局是 无序列表 ;
无序列表 是一个容器 , 内部的 默认是块级元素 , 每个列表项占用一行 ,..., 进行从左到右摆放 , 可以达到案例要求的摆放效果 ;
代码示例 :
<!..., 即可实现图片自适应比例填充 ;
img {
width: 100%;
}
设置图片 , 然后设置 body 背景 , 取消 盒子模型 中的背景 , 即可得到案例要求的布局样式 ;
代码示例