现螅岔出礤在最常见的网页布局有单列、两列、三列等。网页布局的主要方法有：用div元素划分各个区域，比如广告区、导航区、主要内容区、底部版权区等。定义每个区的css，主要区的宽度随佣嗾冤渴屏幕宽度变化而变，以有效利用屏幕空间。定义每个区的块状元素间距和边距。定义每个区的背景色、字体色、边框线等。
工具/原料
文本编辑器
浏览器
方法/步骤
1、根据网页内容制作各个div块。其中最外id为container的div包括其它各个div块，有：顶部区top、左菜单导向区leftnav、主要内容区content、页脚区footer共4个区域。
2、然后，在各个区域中加入一些内容。得到如图效果。
3、定义各个区域的样式。
4、完整代码：<!doc隋茚粟胫typehtml><html><head><style>#co荏鱿胫协ntainer{width:90%;margin:0,auto;background-color:#fff;border:1pxsolidgray;color:#333;line-height:130%;}#top{padding:0.5em;background-color:#ddd;border-bottom:1pxsolidgray;}#toph1{padding:0;margin:0;}#leftnav{width:160px;margin:0;padding:1em;float:left;}#leftnavp{margin:000.5em0;}#footer{clear:both;margin:0;padding:0.5em;color:#333;background-color:#ddd;border-top:1pxsolidgray;}#footerp{margin:0;padding:0;}</style></head><body><divid="container"><divid="top">这是顶部区</div><divid="leftnav"><ul><li><ahref="#">菜单1</a></li><li><ahref="#">菜单2</a></li><li><ahref="#">菜单3</a></li></ul></div><divid="content"><h2>这是主标题<h2><p>这是主要内容</p><p>...</p></div><divid="footer"><p>这是页脚区</p></div></div></body></html>