我最近的几篇专栏文章讨论了使用 xhtml 和 css 实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。 很多 web 构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重要的舒适因素；另外，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。 从table 到 div 近年来，设计人员都使用表（table）来创建固定宽度的布局。表的列和行是对设计人员的布局表格（grid）的一种可行的模拟，所以一点也不奇怪 设计人员为什么采用 html 表来完成页面布局。 然而，基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外，产生的代码也很混乱，难于阅读，甚至难于维护——尤其是在包含合并的表单元格（cell）和嵌套表时。 使用 div 进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外，代码的装载速度会更快，也更易于处理。表及其单元格的格式（formatting）属性被借用到固定宽度布局中，因为指定这些元素的尺寸相当简单。其实通过 div 可以做到同样的事情，只要确定 div 精确的维数并使用绝对和相对定位将这些 div 定位到页面上即可。
一个固定宽度的例子 图 a 展示了一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。所有元素的宽度都是固定的；在浏览器窗口发布变化时它们的尺寸都不会变化。下面的 xhtml 标记生成图 a 所示的页面。（出于简单考虑，内容被截短。）

header

side1

• let me not to the marriage of true minds
  
  
• admit impediments; love is not love
  
  
• which alters when it alteration finds
  
  
• or bends with the remover to remove
  
  
• oh‚ no‚ it is an ever fixed mark
  

main content

that looks on tempests ... his height be taken.

but bears it out ... alteration finds.

whose worth's unknown‚ ... the remover to remove.

side2

• let me not to the marriage of true minds
  
  
• admit impediments; love is not love
  
  
• which alters when it alteration finds
  

footer

or bends with ... height be taken.



下面是将页面设计为固定宽度布局的 css 代码。

构建自己的HTML工具2007-9-30

使用 CSS 创建固定宽度的布局2007-9-30

HTML向XHTML转化2007-9-30

构建自己的HTML工具2007-9-30

XML和XSLT使网页设计更紧密2007-9-30

给光标添加CSS样式2007-9-30

目前没有评论!

您的姓名： 匿名发送

电子邮件：

评论内容：
不能超过100个字符

所有留言只代表网友个人观点，不代表本站观点。
请各位遵纪守法并注意语言文明。