圣杯模型和双飞翼模型的实现

最新推荐文章于 2022-12-30 00:06:40 发布

iceseasyh

最新推荐文章于 2022-12-30 00:06:40 发布

阅读量300

点赞数 2

分类专栏： CSS 文章标签：双飞翼布局圣杯布局

本文链接：https://blog.csdn.net/ICe_sea753/article/details/100552599

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

圣杯模型的实现（中左右）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.head{
				height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			footer{
                height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			.mid{
				width: 100%;
				background: #3176B8;
				
			}
			.left,.right,.mid{
				float: left;
				height: 500px;
				position: relative;
			}
			.left{
				width: 200px;
				margin-left: -100%;
				background: #00B894;
				left: -200px;
			}
			.right{
			    width: 200px;
				margin-right: -200px;
				background: #55A532;
			}
			.cont{
				padding: 0 200px;
			overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="head">head</div>
		<div class="cont">
			<div class="mid">
			mid
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
			
		<footer>footer</footer>
	</body>
</html>

圣杯模型flex盒子的实现方式（左中右）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.head{
				height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			footer{
                height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			.mid{
			    flex:1;
				background: #3176B8;
			}
			.left,.right,.mid{
				height: 500px;
			}
			.left{
				width: 200px;
				background: #00B894;
			}
			.right{
			    width: 200px;
				background: #55A532;
			}
			.cont{
			   display:flex;
			}
		</style>
	</head>
	<body>
		<div class="head">head</div>
		<div class="cont">
			<div class="left">left</div>
			<div class="mid">mid</div>
			<div class="right">right</div>
		</div>
			
		<footer>footer</footer>
	</body>
</html>

双飞翼模型的实现：（中左右）
必须给中间盒子包一层div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			.head{
				height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			footer{
                height: 40px;
				background: #303952;
				color: #fff;
				width: 100%;
			}
			.midcont{
				width: 100%;
				background: #3176B8;
				
			}
			.mid{
				margin: 0 200px 0 200px;
			}
			.left,.right,.midcont{
				float: left;
				height: 500px;
			}
			.left{
				width: 200px;
				margin-left: -100%;
				background: #00B894;
				left: -200px;
			}
			.right{
			    width: 200px;
				margin-left: -200px;
				background: #55A532;
			}
			.cont{
			overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="head">head</div>
		<div class="cont">
			<div class="midcont">
				<div class="mid">mid</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>	
		<footer>footer</footer>
	</body>
</html>

iceseasyh

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
圣杯模型和双飞翼模型的实现

圣杯模型的实现（中左右）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} .head{ hei...
复制链接

扫一扫

专栏目录