【CSS】浮动 ④ ( 浮动布局案例 - 电商布局模块 | 案例分析 | 布局测量摆放 | 浮动布局代码示例 )

韩曙亮

发布于 2023-03-25 11:42:04

9360

发布于 2023-03-25 11:42:04

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、案例效果

使用浮动布局 , 实现下面的京东商城首页的局部界面 ;

完整的布局样式 , 仅做参考 ;

二、案例分析

整体标准流布局 : 整个布局是装在一个盒子模型中 , 先放置一个盒子模型 , 然后将该块级元素盒子居中对齐 , 在浏览器中心位置显示 ;

整体标准流布局作为父容器 , 内部放置 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>

显示效果 :