网页制作教程:DIV+CSS布局第三步,将网站的五个部分写成五个div

1.将“第一步”提到的五个部分都放入DIV容器中，HTML文件中输入如下：

例子代码如下:

<div id="page-container">
<div id="main-nav">Main Nav</div> 
<div id="header">Header</div> 
<div id="sidebar-a">Sidebar A</div> 
<div id="content">Content</div> 
<div id="footer">Footer</div>
</div>
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：

例子代码如下:
#main-nav {
background: red;height: 50px;
}
#header {
background: blue;height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;height: 66px;
}

效果如下:

基本的块内容已经完成,下一篇我们继续讲解设计DIV的浮动以控制各模块位置.欢迎继续访问网站制作教程网.