div+css常见布局结构定义

在使用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"层中又有其它层，结构类似这样：

?

1

2

3

4

5

6

7

8

9

10

<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>页面布局如下图：

嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#container一个规则让列表居右，再给#GlobalNav一个规则让列表居左，而给# Content-Left的list另一个完全不同的表现。