• 三个百分比栏目 (n.01)
• 三个百分比栏目 (n.02)
• 三个百分比栏目 (n.03)
• 三个百分比栏目 (n.04)
• 三个百分比栏目 (n.05)
• 三个百分比栏目 (n.06)
• 三个固定栏目 (n.7)
• 三个固定栏目 (n.8)
• 三个固定栏目 (n.9)
• 三个固定栏目 (n.10)
• 三个固定栏目 (n.11)
• 三个固定栏目 (n.12)
• 自适应，二级栏目固定宽度 (n.13)
• 自适应，二级栏目固定宽度 (n.14)
• 自适应，二级栏目固定宽度 (n.15)
• 自适应，二级栏目固定宽度 (n.16)
• 自适应，二级栏目固定宽度 (n.17)
• 自适应，二级栏目固定宽度 (n.18)
• 自适应，三栏，混合宽度 (n.19)
• 自适应，三栏，混合宽度 (n.20)
• 自适应，三栏，混合宽度 (n.21)
• 自适应，三栏，混合宽度 (n.22)
• 两栏自适应，一边固定 (n.23)
• 两栏自适应，一边固定 (n.24)
• 两个百分比栏目 (n.25)
• 两个百分比栏目 (n.26)
• 上一下各半自适应 (n.27)
• 上一下各半自适应 (n.28)
• 两个百分比栏目和一个较大容器 (n.29)
• 两个百分比栏目和一个较大容器 (n.30)
• 左固定，右、下自适应 (n.31)
• 右固定，左、下自适应 (n.32)
• 两栏固定 (n.33)
• 两栏固定 (n.34)
• 两栏固定 (n.35)
• 两栏固定 (n.36)
• 两栏固定 (n.37)
• 两栏固定 (n.38)
• 固定品字型 (n.39)
• 固定品字型 (n.40)

说明

以上都是正确的标识和CSS，并在以下浏览器测试成功 IE5.0，5.5，IE6，IE7，Opera 8.5， Firefox。

每个页面的布局都包含以下五个主要部分：头，内容，导航，额外的一些东西。每个布局共同基本标识如下：

<div id="container">
  <div id="header">头</div>
  <div id="wrapper">
    <div id="content">内容</div>
  </div>
  <div id="navigation">导航</div>
  <div id="extra">额外的东西</div>
  <div id="footer">页脚</div>
</div> 

有人可能会说，照你这样简单的搞法，这东西也太简单了，不能做为一个设计作品出现在网路上。我要告诉有这样想法的朋友一句话：无论我们的设计有多微妙繁琐，我们都需要有力的基石！这40个XHTML布局完全可以满足任何风格的页面设计。

我们通常将页面设计和页面制作、实现分开来考虑，但是做为一个优秀的网页设计师他会顾及到两个逻辑部分：第一部分是文字排版和色彩，而第二，就是页面布局及最终的实现。

40种XHTML页面布局页面地址 http://www.bjnahan.net/special/XHTML/20060323/index.html

若有疑问请发送邮件到 root@bjnahan.net 或者留言