網頁布局可以有很多種形式，一般我們可以分為以下幾個部分：頭部區(qū)域、菜單導航區(qū)域、內容區(qū)域以及底部區(qū)域。
剛開始，我們可以用色塊來進行填充，認識與熟悉之后在進行進一步的深入。
layout_color.png
簡單實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網頁布局</title>
<style>
body{
color: white;
}
/* 頭部 */
.header{
background: #ccc;
text-align: center;
padding: 20px;
margin: 20px;
}
/* 菜單欄 */
.nav{
overflow: hidden;
background: #333333;
margin: 20px;
}
.nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}
.nav a:hover{
background: #ddd;
color: black;
}
/* 中間 */
.content{
/* background: green; */
height: 300px;
margin: 20px;
}
.left{
float: left;
width: 29.3%;
height: 100%;
background: green;
}
.right{
background: green;
float: left;
width: 29.3%;
height: 100%;
padding-left: 20px;
}
.center{
float: left;
width: 40%;
height: 100%;
background: red;
}
/* 底部 */
.footer{
margin: 20px;
background: #ccc;
text-align: center;
padding: 10px;
}
h1{
color: black;
text-align: center;
}
</style>
</head>
<body>
<h1>簡單網頁布局</h1>
<div class="header">頭部區(qū)域</div>
<div class="nav">
<a href="#">首頁</a>
<a href="#">在線視頻</a>
<a href="#">在線課程</a>
<a href="#">關于我們</a>
<a href="#">聯(lián)系我們</a>
</div>
<div class="content">
<div class="left">左邊內容區(qū)域</div>
<div class="center">中間內容區(qū)域</div>
<div class="right">右邊內容區(qū)域</div>
</div>
<div class="footer">底部區(qū)域</div>
</body>
</html>
layout1.png
