写点什么

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

  • 2012-05-19
  • 本文字数:773 字

    阅读完需:约 3 分钟

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

2012-05-19 08:152919
用户头像

发布了 125 篇内容, 共 37.0 次阅读, 收获喜欢 5 次。

关注

评论

发布
暂无评论
发现更多内容

兄弟们来看我的Java面试资料大全!看了保证不亏,大厂欢迎你~免费的哦

偏执

Java 面试 后端

一个 JVM 解释器bug在 AArch64 平台导致应用崩溃的问题分析

毕昇JDK社区

JVM

模块三-学生管理系统详细设计

绝影

架构训练营

架构实战营第一期 -- 模块三作业

clay

架构实战营

模块三作业:外包学生管理系统架构文档

Felix

[架构实战营第一期]模块三作业

trymorewang

架构实战营

模块三作业

seawolflin

架构实战营

架构训练营模块3作业

慕溶枫

架构训练营

模块3作业“学生管理系统”架构设计

王小森

使用Apache Spark管理、部署和扩展机器学习管道(十一)

Databri_AI

机器学习 spark pandas

模块三作业:外包学生管理系统

buoge

如何重写object虚方法

喵叔

7月日更

模块三作业

Mr.He

架构实战营

Linux之killall命令

入门小站

Linux

外包学生管理系统的架构

feitian

【架构实战营】模块三作业

Abner S.

架构实战营 #架构实战营

学生管理系统架构设计

子豪sirius

架构实战营

网络攻防学习笔记 Day88

穿过生命散发芬芳

网络攻防 7月日更

模块三:外包学生管理系统架构文档

Testcase

架构实战营

饕餮台风vs人类,科技游击战术的进化

脑极体

架构实战营1期第三模块作业

五只羊

架构实战营

在线正则表达式大全测试

入门小站

架构实战营作业 M03

Shawn Liu

如何实现高效联表查询

迹_Jason

Java MySQL redis 缓存 分布式

Vue进阶(幺捌肆):CodeMirror 应用小结

No Silver Bullet

Vue 7月日更 CodeMirror

架构实战营模块3作业

Morphling

#架构实战营

外包学生管理系统的架构文档

木云先森

架构实战营

外包学生管理系统架构设计

gawaine

架构实战营

外包学生管理系统架构文档

tjudream

架构 架构文档 学生选课

学生管理系统详细架构设计

技术是伙伴

架构实战营

架构实战营 模块三 作业

三叔叔_拖延症晚期

使用HTML与CSS3进行富页面布局_语言 & 开发_Jonathan Allen_InfoQ精选文章