1、根据网页内容制作各个div块。其中最外id为container的div包括其它各个div块，有：顶部区top、左菜单导向区leftnav、主要内容区content、页脚区footer共4个区域。
2、然后，在各个区域中加入一些内容。得到如图效果。
3、定义各个区域的样式。
4、完整代码：<!doctype html><html> <head> <style> #co荏鱿胫协ntainer{ 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> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li><a 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>
