HTML混合布局

最新推荐文章于 2021-07-11 13:33:51 发布

weixin_33877092

最新推荐文章于 2021-07-11 13:33:51 发布

阅读量195

点赞数

文章标签： python

原文链接：https://my.oschina.net/liusonghuang/blog/806098

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.html混合布局1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html混合布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.top{height: 100px;background-color: #aaa}
		.main{width: 800px;height: 600px;background-color: #bbb;margin:0 auto;}
		.left{width:200px;height: 600px;background-color: #ddd;float: left;}
		.right{width:600px;height: 600px;background-color: #eee;float: right;}
		.foot{width: 800px;height: 100px;background-color: #ccc;margin:0 auto;}

	</style>
</head>
<body>
	<div class="top"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="foot"></div>
</body>
</html>

效果图

2.混合布局2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html混合布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.top{height: 100px;background-color: #aaa}
		.main{width: 800px;height: 600px;background-color: #bbb;margin:0 auto;}
		.left{width:200px;height: 600px;background-color: #ddd;float: left;}
		.right{width:600px;height: 600px;background-color: #eee;float: right;}
		.sub_left{width: 200px;height: 600px;background-color: red;float: left;}
		.sub_right{width: 400px;height: 600px;background-color: yellow;float: right;}
		.foot{width: 800px;height: 100px;background-color: #ccc;margin:0 auto;}

	</style>
</head>
<body>
	<div class="top"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right">
			<div class="sub_left"></div>
			<div class="sub_right"></div>
		</div>
	</div>
	<div class="foot"></div>
</body>
</html>

效果图：

转载于:https://my.oschina.net/liusonghuang/blog/806098