7小时玩转网页布局开发【新】——4.经典布局之圣杯布局

最新推荐文章于 2022-01-13 10:45:32 发布

Superstatus

最新推荐文章于 2022-01-13 10:45:32 发布

阅读量231

点赞数

分类专栏： Html 文章标签： Html

本文链接：https://blog.csdn.net/Superstatus/article/details/80624113

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

优点：

比双飞翼更好

思路：

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
		body{ margin:0; }
		.container{ padding: 0 200px 0 100px; }
		.container div{ float: left; position: relative; height: 400px;}
		.container .body{ background: #ccc; width: 100%; }
		.container .left{ margin-left: -100%; left: -100px; width: 100px;  background: red;}
		.container .right{ margin-left: -200px; width: 200px; left: 200px;  background: blue;} 
    
		
		
		
	
		
	</style>
</head>
<body>
	<div class="container">
		<div class="body">中间</div>
		<div class="left">左侧</div>
		<div class="right">右侧</div>

	</div>

</body>
</html>