HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

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

关注

评论

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

OneAccess | 面对庞大复杂的身份和权限管理,企业该怎么办?

爱尚科技

探讨丨SaaS软件是否正在“毁掉”数字化转型企业?

优秀

数字化转型

图查询语言 nGQL 简明教程 vol.01 快速入门

NebulaGraph

图数据库

华为云低代码技术:让矿区管理“智变”,一览无遗

科技怪授

和鲸科技入选 2022 中国数据智能领域最具商业潜力的科技 Cool Vender丨甲子20 榜单

ModelWhale

数字化转型 数据智能 科技企业 榜单

为什么说DeFi隐私协议Unijoin.io具备趋势性

股市老人

说透IO多路复用模型

C++后台开发

socket linux开发 epoll IO多路复用 C++开发

如何用Alluxio加速云上深度学习训练?

Alluxio

机器学习 分布式, Alluxio 大数据 开源 数据编排

开个脑洞,带你写一个自己的极狐GitLab CI Runner

极狐GitLab

DevOps 持续集成 CI/CD runner 极狐GitLab

阿里妈妈内容风控模型预估引擎的探索和建设

阿里技术

风控模型

OCR在转转游戏的应用

转转技术团队

后端

和鲸科技入选2022中国企业数智化创新TOP50

ModelWhale

数字化转型 数智化 榜单

Vertically Federated Graph Neural Network for Privacy-Preserving Node Classification

1+1=王

联邦学习 Fl 图神经网络 GNN 节点分类

华为云CSE 关键特性,支持托管Nacos注册配置中心

与时俱进的时代

干货 | 如何进行CMDB数据运营?

嘉为蓝鲸

数据运营 CMDB 自动化运维 嘉为蓝鲸

正式毕业!Apache Kyuubi 成为 Apache 基金会顶级项目!

网易数帆

大数据 spark 开源 Apache Kyuubi

Web应用怎样获取Access Token?

HarmonyOS SDK

HMS Core

“数字·进化”——2022数字化发展峰会圆满落幕

创业邦

零基础3Dmax入门教程

Finovy Cloud

软件 3DMAX

融云获 51CTO 年终评选「中国 IT 行业政企数智办公优秀解决方案奖」

融云 RongCloud

IT 数智化 51cto

华为云数据融合集成平台ROMA Connect,推进企业数字化转型

科技怪授

部门来了个JAVA开发,听说是00后,上来一顿操作给我看呆了...

程序知音

Java JAVA开发 java面试 java架构 后端技术

复杂并发场景下的并发调度模型在转转的演进之路

转转技术团队

Java 性能 后端 高并发

泰山众筹4.0合约系统开发技术

薇電13242772558

智能合约

深度学习入门篇 | 常用的经典神经网络模型

九章云极DataCanvas

神经网络 深度学习

转转支付网关之注解式HTTP客户端

转转技术团队

后端 Java、 注解 http client

软件测试 | 掌握高频 Docker 命令,夯实内功基础

测试人

Docker 软件测试 自动化测试 测试开发 环境搭建

ModStart交给您的开源年终总结

ModStart

动态配置开发模式在转转的落地实践

转转技术团队

Java 后端 可视化 动态配置

“云-网-边-端”融合,汽车新势力的DevOps建设

嘉为蓝鲸

DevOps 自动化运维 嘉为蓝鲸

运维工作汇报那天,集团领导过来视察...

嘉为蓝鲸

自动化运维 嘉为蓝鲸

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