圣杯布局和双飞翼布局

最新推荐文章于 2022-08-16 19:48:13 发布

懂气缸

最新推荐文章于 2022-08-16 19:48:13 发布

阅读量125

点赞数

文章标签：圣杯布局和双飞翼布局

本文链接：https://blog.csdn.net/qq_42202710/article/details/103313084

版权

圣杯布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../css/reset.css">
	<style type="text/css">
		.header,.footer{height: 100px;background: pink;}
		.container{min-height: 400px;padding: 0 200px 0 220px;}
		.middle{width: 100%;min-height: 400px;background: #55A532;}
		.left{width: 220px;min-height: 400px;background: paleturquoise;
			margin-left: -100%;
			left: -220px;
		}
		.right{width: 200px;min-height: 400px;background: papayawhip;
			margin-left: -200px;
			left: 200px;
		}
		.middle,.left,.right{float: left;position: relative;}
	</style>
</head>
<body>
	<div class="header">header</div>
	<div class="container clean">
		<div class="middle">middle</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</body>
</html>

双飞翼布局

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../css/reset.css">
	<style type="text/css">
		.header,.footer{height: 100px;background: skyblue;}
		.container{width: 100%;min-height: 400px;background: #ccc;}
		.left{width: 220px;min-height: 400px;background: pink;
			margin-left: -100%;
		}
		.right{width: 200px;min-height: 400px;background: hotpink;
			margin-left: -200px;
		}
		.container,.left,.right{float: left;}
		.middle{margin:0 200px 0 220px;}
		
		.footer{clear: both;}
	</style>
</head>
<body>
	<div class="header">header</div>
	<div class="container">
		<div class="middle">middle</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="footer">footer</div>
</body>
</html>

懂气缸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
圣杯布局和双飞翼布局

圣杯布局<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"> <style type="text/css"> ...
复制链接

扫一扫