【前端布局归纳】静态、流式、圣杯、双飞翼、自适应、响应式、弹性 、瀑布流、栅格《单列、两列、三列、混合；inline-block布局、float布局》

最新推荐文章于 2022-08-13 14:46:32 发布
最新推荐文章于 2022-08-13 14:46:32 发布
阅读量389 收藏
点赞数
分类专栏： CSS html+css入门学习过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/104451792
版权

文章目录




🔶图我就不发了，源代码可以复制粘贴直接看效果。CCS3布局，等我学完了会完善此篇博客的。

另附传送门：
1.静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
2.2019年前端五大布局，你学会了多少？
3.利用HTML和CSS实现常见的布局
4.前端布局方式分类
5.响应式布局与自适应式布局有什么不同
6.响应式和自适应有什么区别
7.CSS 自适应布局
8.使用CSS3 Media Queries实现网页自适应
9.当外面的容器的height使用百分比时，如何设置line-height可以使里面的文字垂直居中。
10.position，float，display布局方式规整
11.张鑫旭——基于display: inline-block的列表布局（这是效果页）
12.HTML主流布局差异动态演示 流式 自适应 响应式 静态（这是效果页）
13.超经典面试题：用多种方法实现圣杯布局和双飞翼布局
14.圣杯布局和双飞翼布局的理解与思考
15.经典的流式布局实现方法总结(三)(圣杯布局&双飞翼布局)

一、【静态布局】宽高固定值，浏览器放大缩小，布局不变（缩小浏览器后，水平有滚动条）

1-1.单列布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	border: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	overflow: hidden;
	background: #fcc;
	position: absolute;
}

.container {
	width: 1070px;
	margin: 0 auto;
}

/*index.css*/
.header, .nav, .main-body, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header-wrap {
	background: rgba(150, 100, 0, 0.2);
}

.header {
	height: 180px;
	line-height: 180px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-wrap {
	background: rgba(0, 66, 200, 0.2);
}

.footer {
	height: 80px;
	line-height: 80px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.nav-wrap {
	background: rgba(10, 199, 33, 0.2);
}

.nav {
	height: 46px;
	line-height: 46px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.main-body-wrap {
	background: rgba(0, 0, 0, 0.2);
}

.main-body {
	height: 600px;
	line-height: 600px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header-wrap">
			<div class="header container">头部</div>
		</div>
		<div class="nav-wrap">
			<div class="nav container">导航栏</div>
		</div>
		<div class="main-body-wrap">
			<div class="main-body container">主要</div>
		</div>
		<div class="footer-wrap">
			<div class="footer container">页脚</div>
		</div>
	</div>
</body>
</html>

1-2.混合布局：单双单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	background: #fcc;
	position: absolute;
}

.container {
	width: 1070px;
	margin: 0 auto;
}

/*index.css*/
.header, .nav, .main-left, .main-middle, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header-wrap {
	background: rgba(150, 100, 0, 0.2);
}

.header {
	height: 180px;
	line-height: 180px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-wrap {
	background: rgba(0, 66, 200, 0.2);
}

.footer {
	height: 80px;
	line-height: 80px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.nav-wrap {
	background: rgba(10, 199, 33, 0.2);
}

.nav {
	height: 46px;
	line-height: 46px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.main-left, .main-middle {
	height: 600px;
	line-height: 600px;
}

.main-left {
	width: 270px;
	float: left;
	background: rgba(100, 100, 100, 0.2);
}

.main-middle {
	width: 800px;
	float: right;
	background: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header-wrap">
			<div class="header container">头部</div>
		</div>
		<div class="nav-wrap">
			<div class="nav container">导航栏</div>
		</div>
		<div class="main-body-wrap">
			<div class="main-body-box container clearfix">
				<div class="main-left">左栏</div>
				<div class="main-middle">主要</div>
			</div>
		</div>
		<div class="footer-wrap">
			<div class="footer container">页脚</div>
		</div>
	</div>
</body>
</html>

1-3.混合布局：单三单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	min-width: 100%;
	min-height: 100%;
	background: #fcc;
	position: absolute;
}

.container {
	width: 1070px;
	margin: 0 auto;
}

/*index.css*/
.header, .nav, .main-left, .main-middle, .main-right, .footer {
	font-size: 20px;
	font-weight: bold;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
}

.header-wrap {
	background: rgba(150, 100, 0, 0.2);
}

.header {
	height: 180px;
	line-height: 180px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-wrap {
	background: rgba(0, 66, 200, 0.2);
}

.footer {
	height: 80px;
	line-height: 80px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.nav-wrap {
	background: rgba(10, 199, 33, 0.2);
}

.nav {
	height: 46px;
	line-height: 46px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.main-body-box {
	width: 1470px;
	margin: 0 auto;
}

.main-left, .main-middle, .main-right {
	/*width: auto;		可不设，自动分配*/
	height: 600px;
	line-height: 600px;
	float: left;
}

.main-left, .main-right {
	width: 200px;
	background: rgba(100, 100, 100, 0.2);
}

.main-middle {
	background: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header-wrap">
			<div class="header container">头部</div>
		</div>
		<div class="nav-wrap">
			<div class="nav container">导航栏</div>
		</div>
		<div class="main-body">
			<div class="main-body-box clearfix">
				<div class="main-left">左栏</div>
				<div class="main-middle container">主要</div>
				<div class="main-right">右栏</div>
			</div>
		</div>
		<div class="footer-wrap">
			<div class="footer container">页脚</div>
		</div>
	</div>
</body>
</html>

二、【流式布局 / 百分比布局 / 等比缩放布局】宽度百分比，浏览器放大缩小，布局不变（水平无滚动条，高一般随内容撑开或固定值）

2-1.单列布局

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarer {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-body, .footer {
	display: table;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.text {
	display: table-cell;
	vertical-align:middle;
}

.header {
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.main-body {
	height: 600px;
	background: rgba(0, 0, 0, 0.2);
}

.footer {
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body">
			<div class="text">主要</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

2-2.混合布局：单双单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .footer {
	display: table;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header, .main-body, .footer {
	width: 100%;
}

.text {
	display: table-cell;
	vertical-align: middle;
}

.header {
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-left, .main-middle {
	height: 600px;
	float: left;
}

.main-left {
	width: 30%;
	background: rgba(100, 100, 100, 0.2);
}

.main-middle {
	width: 70%;
	background: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body clearfix">
			<div class="main-left">
				<div class="text">左栏</div>
			</div>
			<div class="main-middle">
				<div class="text">主要</div>
			</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

2-3.混合布局：单三单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .main-right, .footer {
	display: table;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header, .footer, .main-body {
	width: 100%;
}

.text {
	display: table-cell;
	vertical-align: middle;
}

.header {
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-left, .main-middle, .main-right {
	height: 600px;
	float: left;
}

.main-left, .main-right {
	width: 20%;
	background: rgba(100, 100, 100, 0.2);
}

.main-middle {
	width: 60%;
	background: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body clearfix">
			<div class="main-left">
				<div class="text">左栏</div>
			</div>
			<div class="main-middle">
				<div class="text">主要</div>
			</div>
			<div class="main-right">
				<div class="text">右栏</div>
			</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

三、【静态+流式】侧栏宽固定，主体宽度自适应

3-1.混合布局：单双单

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	/*min-width: 600px;		可加上最小宽值，这样就会溢出显示滚动条*/
	overflow: hidden;		/*声明溢出隐藏，防止浮动错位带来的部分内容溢出*/
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header, .footer, .main-left {
	display: table;
}

.text {
	display: table-cell;
	vertical-align: middle;
}

.header {
	width: 100%;
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	width: 100%;
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-body {
	width: 100%;
	height: 600px;
	position: relative;
}

.main-left, .main-middle {
	height: 100%;
	position: absolute;
}

.main-left {
	width: 300px;
	background: rgba(100, 100, 100, 0.2);
	left: 0px;
}

.main-middle {
	width: auto;
	line-height: 0;
	overflow: hidden;		/*这里隐藏错位居中多出的位置，当然，可以去掉overflow，在子元素用float，就是下面被注释的那行*/
	background: rgba(0, 0, 0, 0.2);
	left: 300px;
	right: 0;
}

.middle-text-wrap {
	/*float: left;	这里是水平居中用，不过我上面用text-align居中了，所以注释掉，当然，可以不注释，把错位框浮动回来，就不需要overflow隐藏溢出了*/
	position: relative;
	left: 50%;
	top: 50%;
}

.middle-text {
	position: relative;
	left: -50%;		/*或者 right: 50%; */
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body">
			<div class="main-left">
				<div class="text">左栏</div>
			</div>
			<div class="main-middle">
				<div class="middle-text-wrap clearfix">
					<div class="middle-text">主要</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

3-2.混合布局：单三单（单侧栏固定）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	/*min-width: 600px;		想要窗口缩小后不隐藏右栏，可设最小值，这样就能出现滚动条了*/
	overflow: hidden;		/*声明溢出隐藏，防止浮动错位带来的部分内容溢出*/
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .main-right, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.text {
	display: table-cell;
	vertical-align: middle;
}

.header, .footer {
	display: table;
	width: 100%;
}

.header {
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-body {
	width: 100%;
	min-width: 300px;		/*此处控制中间自适应最小显示宽度，300px——即缩小后显示左侧栏，其他部分压缩*/
	position: relative;
}

.main-left, .main-body-box, .main-middle, .main-right {
	height: 600px;
	float: left;
}

.main-left {
	display: table;
	width: 300px;
	background: rgba(100, 100, 100, 0.2);
}

.main-body-box {
	float: none;	/*由于使用了position: absolute; 所以float: left; 可以不需要，当然不 none，也是可以的，不冲突*/
	line-height: 0;	/*行高为0，解决垂直方向上行高带来的误差而无法居中的问题*/
	position: absolute;
	left: 300px;
	right: 0;
}

.main-middle {
	width: 70%;
	background: rgba(0, 0, 0, 0.2);
	position: relative;
}

.main-right {
	width: 30%;
	background: rgba(100, 100, 100, 0.2);
	position: relative;
}

.box-text-wrap {
	/*float: left;	绝对定位absolute和float的水平错位居中知识，此处可不用float，我上面text-align居中了*/
	position: relative;
	left: 50%;
	top: 50%;
}

.box-text {
	position: relative;
	left: -50%;		/*或者 right: 50%; */
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body clearfix">
			<div class="main-left">
				<div class="text">左栏</div>
			</div>
			<div class="main-body-box">
				<div class="main-middle">
					<div class="box-text-wrap">
						<div class="box-text">主要</div>
					</div>
				</div>
				<div class="main-right">
					<div class="box-text-wrap">
						<div class="box-text">右栏</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

3-3.混合布局：单三单（双侧栏固定）

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: 'Microsoft YaHei';
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	height: 100%;
	/*min-width: 600px;		想要窗口缩小后不隐藏右栏，可设最小值，这样就能出现滚动条了*/
	overflow: hidden;		/*声明溢出隐藏，防止浮动错位带来的部分内容溢出*/
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .main-right, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.text {
	display: table-cell;
	vertical-align: middle;
}

.header, .footer {
	display: table;
	width: 100%;
}

.header {
	height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-body {
	width: 100%;
	min-width: 600px;
	position: relative;
}

.main-left, .main-middle, .main-right {
	height: 600px;
	float: left;
}

.main-left, .main-right {
	display: table;
	width: 300px;
	background: rgba(100, 100, 100, 0.2);
}

.main-right {
	position: absolute;
	right: 0;
}

.main-middle {
	width: auto;
	line-height: 0;
	overflow: hidden;		/*中间部分，因为是自适应，浏览器缩小挤压后，用overflow隐藏掉文字溢出*/
	background: rgba(0, 0, 0, 0.2);
	position: absolute;
	left: 300px;
	right: 300px;
}

.middle-text-wrap {
	/*float: left;	绝对定位absolute与float的水平错位居中知识，此处可不用float，我上面text-align居中了*/
	position: relative;
	left: 50%;
	top: 50%;
}

.middle-text {
	position: relative;
	left: -50%;		/*或者 right: 50%; */
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">
			<div class="text">头部</div>
		</div>
		<div class="main-body clearfix">
			<div class="main-left">
				<div class="text">左栏</div>
			</div>
			<div class="main-middle">
				<div class="middle-text-wrap clearfix">
					<div class="middle-text">主要</div>
				</div>
			</div>
			<div class="main-right">
				<div class="text">右栏</div>
			</div>
		</div>
		<div class="footer">
			<div class="text">页脚</div>
		</div>
	</div>
</body>
</html>

四、【圣杯布局】&【双飞翼布局】（属于【流式布局】：左右侧栏固定，主栏自适应）

4-1.【圣杯布局】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	min-width: 550px;
	min-height: 100%;
	overflow: hidden;
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .main-right, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header, .main-middle, .footer {
	width: 100%;
}

.header {
	height: 180px;
	line-height: 180px;	
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	line-height: 80px;
	background: rgba(0, 66, 200, 0.2);
}

.main-body {
	padding-left: 200px; 
	padding-right: 150px;
}

.main-left, .main-middle, .main-right {
	height: 600px;
	line-height: 600px;
	float: left;
}

.main-left, .main-right {
	width: 200px;
	background: rgba(100, 100, 100, 0.2);
}

.main-left {
	margin-left: -100%;
	position: relative;
	right: 200px;
}

.main-right {
	margin-right: -200px; 
}

.main-middle {
	background: rgba(0, 0, 0, 0.2);
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">头部</div>
		<div class="main-body clearfix">
			<div class="main-middle">主要</div>
			<div class="main-left">左栏</div>
			<div class="main-right">右栏</div>
		</div>
		<div  class="footer">页脚</div>
	</div>
</body>
</html>

4-2.【双飞翼布局】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!--
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
-->
<style type="text/css">
/*reset.css*/
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}

ol, ul, li {
	list-style: none;
}

img {
	display: block;
	border: none;
}

a {
	display: block;
	text-decoration: none;
}

.clearfix {
	zoom: 1;
}

.clearfix:after {
	display: block;
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
}

/*common.css*/
.bg {
	width: 100%;
	min-width: 550px;
	min-height: 100%;
	overflow: hidden;
	background: #fcc;
	position: absolute;
}

/*index.css*/
.header, .main-left, .main-middle, .main-right, .footer {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

.header, .main-middle-wrap, .footer {
	width: 100%;
}

.header {
	height: 180px;
	line-height: 180px;
	background: rgba(150, 100, 0, 0.2);
}

.footer {
	height: 80px;
	line-height: 80px;
	background: rgba(0, 66, 200, 0.2);
	clear: both;
}

.main-left, .main-middle-wrap, .main-right {
	float: left;
}

.main-left, .main-middle, .main-right {
	line-height: 600px;
}

.main-left, .main-right {
	background: rgba(100, 100, 100, 0.2);
}

.main-middle {
	height: 600px;
	margin-left: 200px;
	margin-right: 200px;
	background: rgba(0, 0, 0, 0.2);
}

.main-left {
	width: 200px;
	height: 600px;
	margin-left: -100%;
}

.main-right {
	width: 200px;
	height: 600px;
	margin-left: -200px;
}
</style>
</head>

<body>
	<div class="bg">
		<div class="header">头部</div>
		<div class="main-middle-wrap"">
			<div class="main-middle">主要</div>
		</div>
		<div class="main-left">左栏</div>
		<div class="main-right">右栏</div>
		<div  class="footer">页脚</div>
	</div>
</body>
</html>

五、【自适应布局】还未学到css3，尽情期待…

六、【响应式布局】还未学到css3，尽情期待…

七、【弹性布局】还未学到css3，尽情期待…

八、【瀑布流布局】还未学到css3，尽情期待…

九、【栅格布局】还未学到css3、框架，尽情期待…

iuukai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
混合布局
离开实践的理论是空洞的理论,没有理论指导的实践是盲目的实践
03-27 338
混合布局：块与块的布局　三种状态：块挨着块，块嵌套着块，块叠压着块。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 混合布局 body {margi
三列瀑布流
03-16
三列瀑布流源码是一个瀑布流的例子源码，因为本例子的图片都是高清无码的大图如果是用流量会很费，建议wifi测试，瀑布流的实现是定义三个linearlayout，然后向里面addView(),如果多了会出现oom异常，所以做了一些处理。1.lrucache缓存2.只显示当前屏的图片3.滑动过程中不加载图片4.大图缩放成小图，项目编码UTF-8默认编译版本4.4.2注释丰富。
瀑布流布局
学而不思则忘
09-08 371
<body> <div id="container"> <div class="col"> <div class="pic"> <img src="images/1.jpg"> <p>In sagittis sit ...
css实现瀑布流
weixin_62709931的博客
08-13 165
<view class="basisInfo"> <view class="name">{{userInfoS.lastname | emptyData}}（工号：{{userInfoS.workcode | emptyData}}）</view> <view class="role">{{userInfoS.departmentname | emptyData}} {{userInfoS.postName | emptyData}}&....
css的应用到排序,css3使用flexbox实现3列瀑布流（masonry）布局（水平方向排序）...
weixin_39626131的博客
08-03 269
CSS语言：CSSSCSS确定.masonry {display: flex;flex-flow: column wrap;align-content: space-between;/* Your container needs a fixed height, and it* needs to be taller than your tallest column. */height: 665px;...
多列实现瀑布流
tangyuhui
08-06 377
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS3瀑布流&lt;/title&gt; &lt;style&gt; /*大层*/ .container{width:
H40_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
最新发布
08-01
这一设计主要依赖于媒体查询（Media Queries）、弹性网格布局（Flexbox）和栅格系统（Grid System），实现内容的灵活流动和适配。 四、自适应策略 自适应响应式设计是一种更精细化的响应式方法，它不仅考虑屏幕尺寸...
H41_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
通过使用栅格系统、导航条、按钮、表单等预定义元素，开发者可以快速构建响应式布局。此外，这些框架通常包含性能优化的工具，如延迟加载、代码压缩等，以提升移动端的加载速度。 四、JavaScript与jQuery 在移动端...
瀑布流图片展现响应式网页模板_html5 bootstrap 响应式模板UI前端源码.rar
08-01
瀑布流图片展示是一种常见的网页设计布局方式，尤其适用于图片丰富的网站，如摄影、电商或社交媒体平台。这种布局能够自适应不同尺寸的屏幕，提供优秀的用户体验。在这个“瀑布流图片展现响应式网页模板_...
基于grid布局实现的响应式栅格系统
09-10
在响应式栅格系统中，使用百分比或弹性单位（如`fr`）可以实现流体布局，即网格项的宽度随窗口大小变化而变化。这样，栅格系统能够自动适应各种屏幕尺寸，提供更好的用户体验。 6. 自适应断点和栅格切换： 结合...
三列瀑布流源码.zip
07-10
三列瀑布流源码是一个瀑布流的例子源码，因为本例子的图片都是高清无码的大图如果是用流量会很费，建议wifi测试，瀑布流的实现是定义三个linearlayout，然后向里面addView(),如果多了会出现oom异常，所以做了一些处理。1.lrucache缓存2.只显示当前屏的图片3.滑动过程中不加载图片4.大图缩放成小图，项目编码UTF-8默认编译版本4.4.2注释丰富。  
流式布局Demo
10-25
实现自定义ViewGroup，这里用FlowLayout为例，学习鸿神讲的。有清楚的注释
PHP html5+bootstarp自适应响应式购物网站
09-02
Bootstrap的栅格系统允许开发者轻松创建自适应布局，确保网站在不同屏幕尺寸下都能正常显示。同时，它还提供了导航栏、模态框、按钮、表单等常见UI元素，使得购物网站具有专业且一致的外观。 购物网站的功能完整性...
CSS 3.0实现瀑布流布局
越陌度阡
06-10 802
瀑布流布局是网页中常见的布局效果，一般我们都是用JS实现的，其实用CSS 3.0的属性也可以实现这个功能，并且还自带了响应式功能，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-..
css实现简单瀑布流以及存在的问题
菜鸡奋斗ing的博客
10-10 2419
最近有个页面布局需要改为瀑布流的形式，就只单纯显示并没做上拉加载更多的。 先给张效果图，不是很好只是有瀑布流的效果而已： <div id="content"> <div id="imgM" class="trip-bg" ng-click="openModal(businessTypeList[2])"> <i class="icon img trip
关于float和inline-block实现不规则瀑布布局的探索
我的博客
09-23 1129
无标题 1 div{ vertical-align:top; /*定义元素在行内的上下位置，比如sub*/ display:inline-block; margin:0; /*值为0，依然有外边距5px*/ background:black; width:200px; height:200px; } 1 2 3 无论是float还是inline-bloc
瀑布流布局实现的多种方法
qwguo
07-04 605
瀑布流源于国外的一家图片分享网站Pinterest，该网站是通过看上去多列布局的方式展示图片，并且每一列高度有内容多少来决定形成列中的项高度不统一形成的层次不齐的砌墙效果。 瀑布流布局实现的多种方法 瀑布流布局看上去属于多列布局的一种，每列宽度相等但是高度不固定，从而形成的类似于砌墙效果。 基础布局介绍 多列瀑布流布局 通过创建相同宽度的多个列然后通过计算哪一列最低然后给列中添加元素来实现。 代码： <div class="falls-1" id="falls_1"> <d.
前端必看的8个HTML+CSS技巧 （八）瀑布流布局
web全栈开发的博客
11-18 554
CSSGrid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。虽然这些新出的布局...
5分钟教你搞定瀑布流样式
萝卜666的博客
03-22 1459
首先，我们来讲一下什么是瀑布流嘞？在某些个以图片为主的网站中，单一的布局那什么来吸引眼球，当然是尽量炫酷的布局了。瀑布流又称瀑布流式布局，是现在流行的一种布局方式。知道了这些，那瀑布流布局实现的原理是什么呢？ 关于瀑布流算法 此时，可以放在第一行的图片已经就绪，分别为图片1234，这时候第一行已经放满，5号图片需要找到合适自己的位置，我们很清楚的看到，2号下面最最合适了，所以5号就登场啦 6号7号...都会依次找到属于自己的位置 知道它是怎么回事儿之后，我们转换成代码看下（vue..
自适应col自动换行显示_栅格系统、自适应、响应式
05-16
栅格系统是一种前端布局方法，可以帮助我们在不同屏幕尺寸下创建响应式布局。通过将页面划分为行和列，栅格系统可以帮助我们轻松地实现自适应和自动换行的效果。 在栅格系统中，我们将页面划分为若干列，每个列的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值