CSS 网页布局专题 Position Is Everything

好的CSS教程 Good CSS tutorials:

BrainJar.com www.westciv.com

有用的编程站点 Useful coding sites:

Eric Meyer's CSS CSS Shark CSS Bugs in IE5/5.1 Mac Westciv browser support charts CSS browser 'hiding' methods Accessify.com The Nemesis Project

CSS 邮件列表 CSS E-lists:

CSS-Discuss CSS-Discuss Wiki

本站的宗旨 Purpose of this site:

解释当今浏览器的某些愚钝的CSS臭虫，提供一些有趣的CSS现象的演示，说明如何“实现”无表格布局。 To explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes.

各种浏览器的 CSS 演示 Cross-browser CSS Demos:

• 浮动模型问题 The Float Model Problem  揭示了各种浏览器究竟是如何处理浮动的。An expose' of how floats are really rendered across browsers.
• IE 浮动模型的 Bug [2004.01.30] 如果用表格布局，Internet Explorer 的表现和别的浏览器并无二致。但是如果用 CSS 来定位时， IE 表现得相当怪异。其中之一就是他对浮动的处理方式。
• 绝对定位的臭虫 Going Absolutely Buggy  当嵌套使用绝对定位的区块会出现什么？What happens when absolutely positioned boxes are nested.

布局演示 Layout demos

• 最新！ 三栏复合布局演示 三个分栏的复合布局演示。[2004.02.06]
• 最新！ 顺序排列的分栏 就是它！三个高度总是相同的分栏，中间栏先出现在源文件中，两端是任何高度的顶栏和底栏， 所有栏目的颜色都不同，而且边界都是一样长的。在所有现代浏览器中的效果非常一致。 仅限于固定宽度。
• 自由伸展的三栏式版面 Three Column Stretch   实现带有页首和页尾的流动全尺寸三栏式版面，各自都有不同的背景。 A way to achieve 3 full-length liquid columns w/header and footer, all with different backgrounds.
• 依原始码顺序排列的栏段 Source Ordered Columns  谁说不能实现依原始码顺序排列的三个栏段？请看例子。 You say you can't make the source order of your 3-col layout the way you want? Here's how.

学习提示 Study tips:

每个演示页面所用的CSS都嵌入在源代码的 head 部分。 您可以自由获得、使用（如有必要，甚至滥用）本站的代码。 The source code for each demo has all the relevant CSS embedded in the head section. Please feel free to take, use, and if need be, abuse all code found on this site.

Big John   e-mail ©positioniseverything
Last updated: March 7, 2003
Created May 5, 2002
本站部分内容取自 繁体中文版，感谢 hlb, acer,yyhuang, lcc 等的辛苦工作。
中文翻译及整理：onestab 最后更新：Jan 30, 2004

返回 onestab.net 首页