现在最常见的网页布局有单列、两列、三列等。网页布局的主要方法有：1、用div元素划分各个区域，比如广告区、导航区、主要内容区、底部版权区等。2、定义每个区的css，主要区的宽度随屏幕宽度变化而变，以有效利用屏幕空间。3、定义每个区的块状元素间距和边距。4、定义每个区的背景色、字体色、边框线等。工具/原料more文本编辑器浏览器方法/步骤1/4分步阅读

根据网页内容制作各个div块。其中最外id为container的div包括其它各个div块，有：顶部区top、左菜单导向区leftnav、主要内容区content、页脚区footer共4个区域。

2/4

然后，在各个区域中加入一些内容。得到如图效果。

3/4

定义各个区域的样式。

4/4

完整代码：

!doctype htmlhtml head style #container{ width:90%; margin:0,auto; background-color: #fff; border: 1px solid gray; color: #333; line-height: 130%; } #top{ padding: 0.5em; background-color: #ddd; border-bottom: 1px solid gray; } #top h1{ padding: 0; margin: 0; } #leftnav{ width: 160px; margin: 0; padding:1em; float: left; } #leftnav p{ margin: 0 0 0.5em 0; } #footer{ clear: both; margin: 0; padding: 0.5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } #footer p{ margin: 0; padding: 0; } /style /head body div id=container div id=top这是顶部区/div div id=leftnav ul lia href=#菜单1/a/li lia href=#菜单2/a/li lia href=#菜单3/a/li /ul /div div id=content h2这是主标题h2 p这是主要内容/p p.../p /div div id=footer p这是页脚区/p /div /div /body/html