BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

使用HTML与CSS3进行富页面布局

| 作者 Jonathan Allen 关注 530 他的粉丝 ,译者 曹如进 关注 0 他的粉丝 发布于 2012年5月20日. 估计阅读时间: 2 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

长久以来,复杂布局一直是印刷媒体的一个主要关注点。出版物如杂志、报纸上固有的物理限制导致它们创造了非常复杂的流布局。在这样的布局中,内容可以跨越多个列显示并且可以环绕在图片和表格周围进行编排。布局需要能够在整个排版过程中随着内容添加和改变进行动态调整。Adobe正通过向W3C提案CSS Regions ModuleCSS Exclusions Module,力图将该层次的布局控制引入到Web中。

Arno Gourdol发布的新闻来看,该提案包含4个关键特性:

  • 线性内容(Threading content):内容从一个区域“流向”另一个区域;
  • 任意形状容器(Arbitrarily shaped containers):文本显示在非矩形区域内;
  • 任意形状环绕(Arbitrarily shaped exclusions):文本可以环绕在任意形状周围;
  • 区域样式(Region styling):内容样式由其流向区域决定。

为了使内容跨区域流动,用户可以对div标记CSS属性“flow”,然后对其他一至多个div元素标记“content: from(xxx);”(这里的xxx是被指定“flow”属性的元素名称)。在做完这些之后,内容就会随着每个div被填充之后由一个div流向下一个。

为了支持非矩形区域,开发人员可以使用wrap-shape和wrap-shape-mode属性。目前,虽然wrap-shape接受由一串点组成的多边形指定形状,但是“你可以想象其他几何图元也可以用作指定形状,或者甚至可以使用图片的alpha值”。

环绕区域(Exclusion region)是一个不显示文本的区域。该效果同样可以借助wrap-shape-mode属性完成,只是需要指定值为“around”而不在是“content”。

虽然WebKit原型中尚未实现区域样式,但是Adobe已打算对其进行支持。在下面的例子中,你会看到第一块区域是了使用较大的字体,并且它在与其他区域共享相同内容的情况下使用了不同的颜色:

注:上述图片版权归Adobe Systems Incorporated 2012所有。

查看英文原文:Rich page layout with HTML and CSS3

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这个特性的结果看起来不错,就是具体的实现要细看了 by Zheng Can

这个特性的结果看起来不错,就是具体的实现要细看了

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT