前端学习之浮动布局与flex布局

最新推荐文章于 2024-05-04 14:31:30 发布

li_wei_quan

最新推荐文章于 2024-05-04 14:31:30 发布

阅读量2.1k

点赞数 5

分类专栏：布局 web开发文章标签：浮动布局 flex布局

本文链接：https://blog.csdn.net/li_wei_quan/article/details/89176720

版权

web开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

布局

1 篇文章 0 订阅

订阅专栏

前言：

原本是个java后端的，在学校里学过一点css和js，但是连布局都学不好，js出错还不报错，果断放弃前端。但是公司严重缺前端，硬把我分到前端组。为了饭碗，只能开始重新学习前端。现在从最基本的布局开始学起，每日练习写成博文，以做自勉。

上面的是设计图，我在学习了浮动布局后，花了一天半的时间，加上请教别人，终于写出来了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>浮动布局</title>
<style type="text/css">
.container{
	width: 970px;
	margin: 0 auto;
}
.head, .foot{
	clear: both;
	margin: 10px auto;
}
.middle{
	clear: both;
	margin: 10px auto;
}
.item-1{
	background-color: red;
	width: 277px;
	height: 103px;
	float: left;
}
.item-2{
	background-color:chartreuse;
	width: 137px;
	height: 49px;
	float: right;
}
.item-3{
	background-color:chartreuse;
	width: 679px;
	height: 46px;
	float: right;
	margin-top: 8px;
}

.item-4{
	background-color:gold;
	width: 310px;
	height: 435px;
	float: left;
	margin-right: 10px;
}
.item-5{
	background-color:lightblue;
	width: 450px;
	height: 240px;
	float: right;
	margin-right: 10px;
}
.item-6{
	background-color: lightblue;
	width: 450px;
	height: 110px;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}
.item-7{
	background-color: lightblue;
	width: 450px;
	height: 30px;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}
.item-8{
	background-color: purple;
	width: 190px;
	height: 400px;
	float: right;
}
.item-9{
	background-color: green;
	width: 650px;
	height: 25px;
	float: right;
	margin-top: 10px;
}
.item-10{
	background-color: blue;
	width: 970px;
	height: 35px;
}
/* 清除浮动 */
.clearfix:after{
  content:""; 
  display:block; 
  visibility:hidden; 
  height:0;
  clear:both;
}
.clearfix{zoom:1;}
</style>
</head>
<body>
<div class="container">
	<div class="head clearfix">
		<div class="item-1"></div>
		<div class="item-2"></div>
		<div class="item-3"></div>
	</div>
	<div class="middle clearfix">
		<div class="item-4"></div>
		<div class="item-8"></div>
		<div class="item-5"></div>
		<div class="item-6"></div>
		<div class="item-7"></div>
		<div class="item-9"></div>
	</div>
	<div class="foot">
		<div class="item-10"></div>
	</div>	
</div>
</body>
</html>

下面的是flex布局的写法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>flex布局</title>
<style type="text/css">
.container{
	width: 970px;
	height: 593px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.head{
	width: 970px;
	height: 103px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.item-1{
	background-color: red;
	width: 277px;
	height: 103px;
}
.box_23{
	width: 679px;
	justify-content: flex-end;
}
.item-2{
	background-color:chartreuse;
	width: 137px;
	height: 49px;
	float: right;
}
.item-3{
	background-color:chartreuse;
	width: 679px;
	height: 46px;
	margin-top: 8px;
	float: right;
}
.middle{
	width: 970px;
	height: 435px;
	margin: 10px auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.item-4{
	background-color:gold;
	width: 310px;
	height: 435px;
	margin-right: 10px;
}
.middle_56789{
	width: 650px;
}
.box_567{
	width: 450px;
	height: 400px;
}
.box_567_8{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.item-5{
	background-color:lightblue;
	width: 450px;
	height: 240px;
}
.item-6{
	background-color: lightblue;
	width: 450px;
	height: 110px;
	margin-top: 10px;
}
.item-7{
	background-color: lightblue;
	width: 450px;
	height: 30px;
	margin-top: 10px;
}
.item-8{
	background-color: purple;
	width: 190px;
	height: 400px;
}
.item-9{
	background-color: green;
	width: 650px;
	height: 25px;
	margin-top: 10px;
}
.foot{
	width: 970px;
	height: 35px;
	background-color: blue;
}
</style>
</head>
<body>
<div class="container">
	<div class="head">
		<div class="item-1"></div>
		<div class="box_23">
			<div class="item-2"></div>
			<div class="item-3"></div>
		</div>
	</div>
	<div class="middle">
		<div class="item-4"></div>
		<div class="box_56789">
			<div class="box_567_8">
				<div class="box_567">
					<div class="item-5"></div>
					<div class="item-6"></div>
					<div class="item-7"></div>
				</div>
				<div class="item-8"></div>
			</div>
			<div class="item-9"></div>
		</div>
	</div>
	<div class="foot"></div>	
</div>
</body>
</html>

li_wei_quan

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
前端学习之浮动布局与flex布局

前言：原本是个java后端的，在学校里学过一点css和js，但是连布局都学不好，js出错还不报错，果断放弃前端。但是公司严重缺前端，硬把我分到前端组。为了饭碗，只能开始重新学习前端。现在从最基本的布局开始学起，每日练习写成博文，以做自勉。上面的是设计图，我在学习了浮动布局后，花了一天半的时间，加上请教别人，终于写出来了<!DOCTYPE html><html&...
复制链接

扫一扫