一、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面布局2</title>
		<style type='text/css'>
			/*下面的星号让素有元素内外边距都为0，不留空隙*/
			*{
				padding:0px;
				margin:0px;
			/*我们让整个屏幕都有一种淡淡的背景色*/
			}
			body{
				background-color:lightcyan;
			}
			/*下面这个box是承载全部网页内容的容器样式，是下面所有div元素的父级元素的样式，注意一定要先将字号设为0，否则主体和页脚之间会有一条白色缝隙*/
			#box{
				width:900px;
				margin:0 auto;
				font-size:0;
			}
			#logo{
				height:100px;
				background-color:orange;
			}
			#nav{
				display:inline-block;
				width:200px;
				height:600px;
				background-color:lightseagreen;
				
			}
			#main{
				display:inline-block;
				width:700px;
				height:600px;
				background-color:lightgoldenrodyellow;
				float:right;
				
			}
			#footer{
				height:40px;
				background-color:darkgrey;
				
			}
		</style>
	</head>
	<body>
		<div id='box'>
			<div id='logo'>
				<span style="font-size:60px;margin-left:300px;">logo区域</span>
			</div>
			<div id='nav'>
				<ul type='none' style="font-size:60px;margin-left:50px;margin-top:100px;">
					<li>导</li>
					<li>航</li>
					<li>区</li>
					<li>域</li>
				</ul>
			</div>
			<div id='main'>
				<p style='font-size:60px;margin-left:200px;margin-top:200px;'>主体区域</p>
			</div>
			<div id='footer'>
				<span style='font-size:20px;margin-left:400px;'>页脚区域</span>
			</div>
		</div>
		
	</body>
</html>

二、效果图

更多推荐

HTML5实现一种很常见的网页布局设计（导航栏在左侧）