红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

使用 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:152827
用户头像

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

关注

评论

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

带你读顶会论文丨基于溯源图的APT攻击检测

华为云开发者联盟

安全

Java设计模式系列学习

梁歪歪 ♚

设计模式

SingletonPattern-单例模式

梁歪歪 ♚

设计模式

TreeSet源码分析

zarmnosaj

5月月更

Vue框架学习笔记【day二】

恒山其若陋兮

5月月更

【安全】揭秘小白如何从0到1逆袭成为安全工程师

网络安全学海

网络安全 安全 信息安全 渗透测试

贪心算法:Dota2 参议院 🏯

空城机

LeetCode 5月月更

LabVIEW控制Arduino实现示波器(基础篇—7)

不脱发的程序猿

单片机 LabVIEW Arduino LIAT Arduino实现示波器

LabVIEW控制Arduino实现模拟数据采集(基础篇—8)

不脱发的程序猿

单片机 LabVIEW Arduino LIAT 模拟数据采集

Crypto巨头们ALL IN元宇宙,PlatoFarm或能突围

BlockChain先知

研发效能团队规模、职能划分和优劣势分析概述(第一篇)

laofo

DevOps cicd 研发效能 组织架构 平台建设

FactoryMethodPattern-工厂方法模式

梁歪歪 ♚

设计模式

LabVIEW控制Arduino实现RGB调色灯(基础篇—6)

不脱发的程序猿

单片机 LabVIEW Arduino LIAT RGB调色灯

在线字符或文本转二进制工具

入门小站

工具

LabVIEW控制Arduino驱动1602液晶显示屏(基础篇—10)

不脱发的程序猿

单片机 LabVIEW Arduino LIAT 驱动1602液晶显示屏

PrototypePattern-原型模式

梁歪歪 ♚

设计模式

朋友圈架构设计

intelamd

值得收藏:当向数据库导入大量数据时,mysql主键唯一键重复插入,如何丝滑操作并不导入重复数据呢

迷彩

MySQL 数据库 大数据运维 5月月更

BuilderPattern-建造者模式

梁歪歪 ♚

设计模式

西昊智能家具2022新品发布,硬实力为健康撑腰

Geek_2d6073

Crypto巨头们纷纷聚焦“Building platonic”,PlatoFarm会是解决方案吗?

西柚子

AbstractFactoryPattern-抽象工厂模式

梁歪歪 ♚

设计模式

linux之curl使用技巧

入门小站

模块2作业

Geek_701557

借势双碳东风:干“实事”的“虚拟”电厂

脑极体

微信朋友圈的复杂度

爱晒太阳的大白

Sa-Token 单点登录 SSO模式二 URL重定向传播会话示例

Java 登录验证 SaToken

LabVIEW控制Arduino实现舵机联控(基础篇—9)

不脱发的程序猿

单片机 LabVIEW Arduino LIAT 舵机联控

密码学系列之:X.690和对应的BER CER DER编码

程序那些事

密码学 程序那些事 5月月更

在线HTML转Javascript工具

入门小站

工具

2.4 航线图介绍

Geek_古藤模根

图数据库实战 Gremlin

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