css3 region：基于html和css3的富页面布局

《css3 region：基于html和css3的富页面布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、CSS3Region：基于HTML和CSS3的富页面布局译自：CSS3regions:RichpagelayoutwithHTMLandCSS3中文：CSS3Region：基于HTML和CSS3的富页面布局请尊重版权，转载请注明来源，多谢！互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而，当为印刷设计内容时，一些功能显然仍然不可能或者很难使用Web标准来实现。印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。Adobe通过增强CSS进行了一些实验来展示一

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

3、作。随着我们和广大社区的讨论，我们将会做些改变。本文中用到的语法反映出当前W3C草案的现状，但是随着W3C工作组和社区的探讨可能会有些进化。同时也请注意，按照惯例，所有的新的数学将会首先采用-webkit-前缀。不过，为了简化，我在本文中省去了这个前缀。现在，让我们了解这个扩展吧，他们可以被分为4类:·线性内容(Threadingcontent):从一个区域“流向”另一个区域的内容。·任意形状的容器(Arbitrarilyshapedcontainers):在非矩形区域内显示文本。·任意形状环绕(Arbitrarilyshapedexclusion):文

4、本环绕非矩形区域。·区域样式(Regionstyling):根据流向区域显示内容。下面是各种分类的例子：内容流(Contentflow)在典型的HTML文档中，文字可以在多个区域显示，但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本，或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时，这可能会无法乱掉。这个方法(css3region)同样是的拥有在缩放窗口是自适应的流体布局成为可能，或者，当显示在平板上时，自适应竖屏(portrait)或者横屏(landscape)显示。图1.文字跨3个不同宽的列显

5、示如果你想要单独地指定一托内容(比如文字和图片)，那些内容如何在一串区域内显示(flow)呢？这正是内容流(contentflow)要做的。要使用它，通过flow属性赋予内容的容器一个名字，这样做会将内容从普通的CSS布局流中去掉，然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。上面的三列布局的代码如下：CSS1234567#source{flow:"main-thread";}.region{content:from(main-thread);background:#C5DFF0;}HTML12

6、source">

Loremipsumdolor[...]