写点什么

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

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

关注

评论

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

哪些技术有可能坐上智慧城市发展的快车

Onegun

智慧城市 小程序容器 数字城市

顶礼膜拜!阿里内部出品,全网首发Spring Security项目实战搭建

Java spring spring security Spring Security OAuth

百人研发团队百亿销售规模的技术架构实践分享

车江毅

创业做共享电动车!如何找厂家合作

共享电单车厂家

共享电动车厂家 共享电单车厂商 共享电单车投放 共享电动车创业项目

德邦快递:逆境之下,让数字化辅助业务的利润增长

Kyligence

数据分析 数字化管理 指标中台

【活动报名】PolarDB开源数据库&PG中文社区技术沙龙温州站

阿里云数据库开源

数据库 postgresql 阿里云 开源 polarDB

从GitHub火到头条!共计1658页的Java岗面试核心MCA版,拿走不谢

Java java面试 Java八股文 Java面试题 Java面试八股文

头部企业走入无人区,国产数智化厂商挑大梁

用友BIP

MySQL百万数据深度分页优化思路分析

Java MySQL 数据库

2023淘宝天猫金婴奖公布,小度学习机获年度超级新品奖!

科技热闻

大模型竞争白热化 这家广州的科技公司却开辟了新战场

科技热闻

跨平台的Markdown编辑器:Typora for Mac中文版

真大的脸盆

共识算法之Raft算法模拟数

TiAmo

算法 共识算法 模拟数

还在分不清各种IO模型?

Java你猿哥

Java Linux io I/O模型 Java IO

WebSocket与Socket、TCP、HTTP的区别

Apifox

程序员 TCP socket HTTP websocket

Last Week in Milvus

Zilliz

Milvus Zilliz 向量数据库

来这公司一年碰到的问题比我过去10年都多

艾小仙

Java kafka spring spring-boot

GPT:低代码的终局性机遇

小博

人工智能 低代码 PaaS GPT

小程序的安全架构解析

Onegun

小程序 安全 小程序容器 小程序架构

阿里内部教材:15W字的SpringCloud微服务实战,我一口气给你打包

Java 架构 微服务 Spring Cloud

今年互联网是“银二铜三铁四丐五”?程序员面试如何破局?

Java你猿哥

Java 架构 算法 多线程 java面试

SpringBoot 结合 Liquibase 实现数据库变更管理

Java spring Liquibase

如何更好的分析潜在人脉?聊聊华为云图引擎GES的Cypher子查询

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 5 月 PK 榜

如何解决注册并发问题并提高QPS

北桥苏

队列 并发 Redis 核心技术与实战

intellij idea 粘贴字符串如何不带换行符?

源字节1号

微信小程序 开源 软件开发 前端开发 后端开发

GitHub发布即百万!字节内网超实用 java性能优化手册,star超十万

Java你猿哥

Java JVM ssm Java性能调优 java程序优化

MLCC龙头涨价;车厂砍单芯片;台积电28nm设备订单全部取消!

元器件秋姐

芯片 汽车 资讯 新能源 MLCC

重磅来袭!豆瓣评分9.2,万人血书的多线程与高并发v2.0版本

Java 多线程 高并发

兼顾可扩展、高并发与数据一致性:咸鱼优惠系统设计实践

Java你猿哥

Java 架构 ssm 架构设计 并发

阿里巴巴宣布加入Linux Foundation AI&Data基金会,捐赠首个开源项目DeepRec

阿里云大数据AI技术

人工智能 大数据

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