CSS3让网页更富于表现和支持更复杂布局

互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而，当为印刷设计内容时，一些功能显然仍然不可能或者很难使用Web标准来实现。

印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。

Adobe通过增强CSS进行了一些实验来展示一些传统杂志使用的复杂布局。我们也提交了一些建议到W3C CSS工作组，并构建了一个原型来通过webkit实现这些提案。你可以从Adobe Labs下载这些原型体验下。 然后你也可以在CSS Regions Module和这个W3C网站上的CSS Exclusions Module 页面找到W3C编写的草案。你也可以订阅W3C CSS 邮件列表来讨论这个问题。欢迎在邮件标题中加入”[css3-regions]“或者”[css3-exclusions]“来在这个邮件组中讨论这个问题。当然也可以通过Adobe Labs的CSS Regions 论坛反馈问题。

一些说明: 这是个在进行中的工作。随着我们和广大社区的讨论，我们将会做些改变。本文中用到的语法反映出当前W3C草案的现状，但是随着W3C工作组和社区的探讨可能会有些进化。同时也请注意，按照惯例，所有的新的数学将会首先采用-webkit-前缀。不过，为了简化，我在本文中省去了这个前缀。

现在，让我们了解这个扩展吧，他们可以被分为4类:

• 线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
• 任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
• 任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
• 区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子：

内容流(Content flow)

在典型的HTML文档中，文字可以在多个区域显示，但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本，或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时，这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能，或者，当显示在平板上时，自适应竖屏(portrait)或者横屏(landscape)显示。

图1.文字跨3个不同宽的列显示

如果你想要单独地指定一托内容(比如文字和图片)，那些内容如何在一串区域

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!