<DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>div布局</title>
<style type="text/css">
div#container
{
width:800px;
}
div#header
{
background-color:#99bbbb;
}
div#menu
{
background-color:#ffff99;
height:450px;
width:200px;
float:left;
}
div#content
{
background-color:#EEEEEE;
height:450px;
width:600px;
float:left;
}
div#footer
{
background-color:#99bbbb;
text-align:center;
clear:both;
}
h1
{
margin-bottom:;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Tilte of the web page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<p>无序列表</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Jquery</li>
</ul>
<p>有序列表</p>
<ol>
<li>电视机</li>
<li>冰箱</li>
<li>空调</li>
</ol>
<p>自定义列表</p>
<dl>
<dt>科目</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3CSchool.com.cn</div>
</div>
</body>
</html>
效果图：