文章目录
- 一、案例效果
- 二、案例分析
- 三、布局测量摆放
- 四、完整摆放效果
一、案例效果
使用 浮动 布局 , 实现下面的 京东商城 首页 的局部界面 ;
完整的布局样式 , 仅做参考 ;
二、案例分析
整体标准流布局 : 整个布局 是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该 块级元素 盒子 居中对齐 , 在浏览器中心位置显示 ;
整体 标准流 布局 作为父容器 , 内部放置 3 个浮动布局 , 前两个浮动布局是普通的 <div> 块级元素 , 第三个浮动布局是 <ul> 无序列表 ;
<ul> 无序列表 是一个容器 , 内部的 <li> 默认是块级元素 , 每个列表项占用一行 , 设置成 浮动元素 后 , 该列表项的显示模式 变为 行内块元素 模式 , 以网格的形式排列 ;
<li> 列表项默认左侧带一个原点 , 使用下面的样式 , 去除默认的左侧原点 ;
li {
list-style: none;
}
尺寸精准测量 : 将图片拖到 PhotoShop 中 , 测量尺寸 ;
- 整体盒子模型 : 使用标尺将盒子内容包裹起来 , 盒子的尺寸 1190 x 370 像素 ;
- 左侧的两个 盒子 大小 290 x 370 像素 , 中间的缝隙是 10 x 370 像素 ;
- 右侧的无序列表 , 距离第二个盒子 10 像素间隔 , 无序列表 列表项 左右间隔 10 像素 , 上下间隔 10 像素 , 无序列表列表项大小 290 x 180 像素 ;
整体尺寸 1190 x 370 像素 ;
盒子1 和 盒子2 尺寸 290 x 370 像素 , 中间还有 10 像素间隔 ;
盒子3 尺寸 600 x 370 , 无序列表 包括 10 像素的间隔 ; 这样 无序列表 中每个列表项 左侧 和 底部 都有 10 像素外边距 ;
列表项 290 x 180 , 加上两个 10 像素间隔 , 宽度正好是 600 像素 ;
三、布局测量摆放
将 除外部 box 之外的 所有的 盒子模型 , 都设置为浮动元素 , 进行从左到右摆放 , 可以达到案例要求的摆放效果 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
list-style: none;
}
/* 总体盒子模型 */
.box {
width: 1190px;
height: 370px;
background-color: pink;
margin: auto;
}
/* 左侧盒子模型 */
.div1 {
float: left;
width: 290px;
height: 370px;
background-color: orange;
}
/* 中间的盒子模型 */
.div2 {
float: left;
width: 290px;
height: 370px;
background-color: orange;
margin-left: 10px;
}
/* 右侧的列表 */
.list {
float: left;
width: 600px;
height: 370px;
background-color: skyblue;
}
/* 列表项 */
.list li {
float: left;
width: 290px;
height: 180px;
background-color: pink;
margin-left: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">
</div>
<div class="div2">
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>显示效果 :
四、完整摆放效果
在盒子模型中 , 放入 <img> 标签 , 插入图片 , 并且为图片设置如下效果 , 即可实现图片自适应比例填充 ;
img {
width: 100%;
}
设置图片 , 然后设置 body 背景 , 取消 盒子模型 中的背景 , 即可得到案例要求的布局样式 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮动特性</title>
<style>
/* 清除标签默认的内外边距 */
* {
padding: 0;
margin: 0;
}
/* 清除列表默认样式 ( 主要是前面的点 ) */
li {
list-style: none;
}
/* 设置总体背景 */
body {
background-color: #f4f4f4;
}
/* 总体盒子模型 */
.box {
width: 1190px;
height: 370px;
margin: auto;
}
/* 左侧盒子模型 */
.div1 {
float: left;
width: 290px;
height: 370px;
}
/* 中间的盒子模型 */
.div2 {
float: left;
width: 290px;
height: 370px;
margin-left: 10px;
}
/* 右侧的列表 */
.list {
float: left;
width: 600px;
height: 370px;
}
/* 列表项 */
.list li {
float: left;
width: 290px;
height: 180px;
margin-left: 10px;
margin-bottom: 10px;
}
/* 插入图片自适应 */
img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">
<img src="images/jd_1.png" alt="">
</div>
<div class="div2">
<img src="images/jd_2.png" alt="">
</div>
<ul class="list">
<li><img src="images/jd_3.png" alt=""></li>
<li><img src="images/jd_4.png" alt=""></li>
<li><img src="images/jd_5.png" alt=""></li>
<li><img src="images/jd_6.png" alt=""></li>
</ul>
</div>
</body>
</html>显示效果 :
