这个代码是我学习制作网页时候在网上搜索的到的一篇文章，我也是第一次学，当我看到这个代码的时候首先想到的是创建文本然后复制，保存为test.html。打开先看看实现了怎么样的功能，边看网页边看代码，我相信你也能够轻松看懂。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
margin: auto;
width: 800px;
#max-width: 100%;
}
.header{
width: 100%;
height:30px;
background-color: blue;
}
.content{
width:100%;
height: 100px;
background-color: #f8f8f8;
}
.content-left{
float:left;
height:100%;
width:100px;
background-color: yellow;
}
.content-mid{
height:100%;
float:left;
width:200px;
background-color: green;
}
.content-right{
height:100%;
float:right;
width:300px;
background-color: #167676;
}
.footer{
width: 100%;
height: 50px;
background-color: gray;
}
</style>
</head>
<body>
<div class="header">
I am Header
</div>
<div class="content">
<div class="content-left">
I am content left
</div>
<div class="content-mid">
I am content mid
</div>
<div class="content-right">
I am content right
</div>
</div>
<div class="footer">
I am footer
</div>
</body>
</html>
效果演示如下：
