在使用div+css布局时，首先应该根据网页内容进行结构设计，仔细分析和规划你的页面结构，你可能得到类似这样的几块：
页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜索框、页脚(版权和有关法律声明)。
通常采用DIV元素来将这些结构定义出来，类似这样：
<div id="Container"></div> 页面层容器
<div id="header"></div> 页面头部
<div id="content"></div> 页面主体
<div id="globalnav"></div> 站点导航
<div id="subnav"></div> 子菜单
<div id="search"></div> 搜索框
<div id="footer"></div> 页脚
这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。
良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码<table width="80%" cellpadding="3" border="2" align="left">，现在可以只在HTML中写<table>，所有控制表现的东西都写到CSS中去，在结构化的HTML中，table就是表格，而不是其他什么(比如被用来布局和定位)。
举例列举一个常见网站布局结构：
上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样：
<div id="Container">
<div id="Header">
<div id="Logo"></div>
<div id="GlobalNav"><ul>a list</ul></div>
</div>
<div id="Content">
<div id="Content-Left"><ul>a list</ul></div>
<div id="Content-Main"></div>
</div>
<div id="Footer"></div>
</div>页面布局如下图：
.jpg)
嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#container一个规则让列表居右，再给#GlobalNav一个规则让列表居左，而给# Content-Left的list另一个完全不同的表现。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
博文来源广泛，如原作者认为我侵犯知识产权，请尽快给我发邮件 664507902@qq.com联系，