Html 网页布局（一）

时间：2016-03-28 21:42:15 阅读：165 评论：0 收藏：0 [点我收藏+]

标签：


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="decsription" content="一列布局变混合布局" />
<title>一列布局混合布局</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0; /*清楚默认样式*/
}

.top {
	height: 100px;
	background: blue;
}
.nav{height:100px;width:1000px;background:#f60;margin:0 auto;}
.main {
	width: 800px;
	height: 600px;
	background: #ccc;
	margin: 0 auto;
}
.left{width:200px;height:600px;background:yellow;float:left;}
.right{width:600px;height:600px;background:#369;float:right;}
.sub_l{width:400px;height:600px;background:#218;float:left;}
.sub_r{width:200px;height:600px;background:green;float:right;}
.sub_r_up{width:200px;height:200px;background:#765;}
.sub_r_down{width:200px;height:300px;background:red;}
.bottom {
	width: 800px;
	height: 100px;
	background: #b0b;
	margin: 0 auto;
}
</style>
</head>
<body>
	<div class="top">
		<div class="nav"></div>
	</div>
	<div class="main">
		<div class="left"></div>
		<div class="right">
			<div class="sub_l"></div>
			<div class="sub_r">
				<div class="sub_r_up"></div>
				<div class="sub_r_down"></div>
			</div>
		</div>
	</div>
	<div class="bottom"></div>
</body>
</html>

Html 网页布局（一）

标签：

原文地址：http://www.cnblogs.com/hsd1727728211/p/5330565.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行