网页布局可以有很多种形式，一般我们可以分为以下几个部分：头部区域、菜单导航区域、内容区域以及底部区域。
刚开始，我们可以用色块来进行填充，认识与熟悉之后在进行进一步的深入。
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">头部区域</div>
<div class="nav">
<a href="#">首页</a>
<a href="#">在线视频</a>
<a href="#">在线课程</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div class="content">
<div class="left">左边内容区域</div>
<div class="center">中间内容区域</div>
<div class="right">右边内容区域</div>
</div>
<div class="footer">底部区域</div>
</body>
</html>
layout1.png
