查看效果：
http://hovertree.com/texiao/css/26/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>頁面結構練習_何問起</title>
<base target="_blank" />
<style>
body {
background: #CCC;
}
.index {
max-width: 90%;
background: #3F0;
margin: 0px auto;
}
.head {
width: 100%;
height: 60px;
}
.head a {
min-width: 12.5%;
height: auto;
background: #4A69A6;
color: #FFF;
font-size: large;
display: block;
text-align: center;
float: right;
margin-top: 2%;
}
.main {
width: 100%;
min-height: 600px;
background: #FFFFFF;
text-align:center;
}
.foot {
width: 100%;
background-color: cadetblue;
min-height: 60px;
text-align:center;font-family:Arial, Helvetica, sans-serif;
}.foot a{color:white;}
</style>
</head>
<body>
<div id="index">
<div class="index">
<div class="head">
<a href="http://hovertree.com/">進入官網</a>
</div>
<div class="main">
</div>
<div class="foot">© <a href="http://hovertree.com/texiao/css/26/">版權所有</a></div>
</div>
</div>
</body>
</html>