margin布局

最新推荐文章于 2024-06-21 00:05:48 发布

原创最新推荐文章于 2024-06-21 00:05:48 发布 · 732 阅读

0 ·

CC 4.0 BY-SA版权

html+css网页制作专栏收录该内容

25 篇文章

订阅专栏

本文提供了一个使用HTML和CSS进行网页布局的具体实例。通过定义不同区域的样式属性，如宽度、高度及背景颜色等，展示了如何实现一个包含头部、主要内容区（分为左右两部分）、以及底部的标准网页布局。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
<style type="text/css">
	#container{
		width: 1002px;
		background:gray;
	}
	#header{
		height: 120px;
		background: orange;
	}
	#main{
		height: 600px;
		background: green;
	}
	#lside{
		float: left;
		width: 700px;
		height: 600px;
		background: pink;
	}
	.four{
		width: 330px;
		height: 280px;
		background: black;
		margin: 10px;
		float: left;
	}
	#rside{
		float: right;
		width: : 302px;
		height: 600px;
		background: purple;

	}
	#footer{
		height: 120px;
		background: blue;
	}
</style>
</head>
<body>
	<div id="container">
		<div id="header"></div>
		<div id="main">
			<div id="lside">
				<div class="four"></div>
				<div class="four"></div>
				<div class="four"></div>
				<div class="four"></div>
			</div>
			<div id="rside"></div>
		</div>
		<div id="footer"></div>
	</div>
</body>
</html>