写点什么

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

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

关注

评论

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

AI写PPT的软件有哪些?这5款备受推崇的AIPPT工具值得推荐!

彭宏豪95

人工智能 PPT 在线白板 办公软件 AI生成PPT

京东百万级调度系统(Buffalo)架构解密

京东科技开发者

【YashanDB知识库】filter or改写问题

YashanDB

yashandb 崖山数据库 崖山DB

以小见大-B端图标设计沉思

inBuilder低代码平台

设计 图标制作

数业智能心大陆,你的专属AI心理专家

心大陆多智能体

智能体 AI大模型 心理健康 数字心理

【YashanDB知识库】数据库使用shutdown immediate无响应导致coredump

YashanDB

yashandb 崖山数据库 崖山DB

Snipaste截图/贴图工具

源字节1号

小程序 开源 后端

巧用 API 接口,尽览京东商品详情

Noah

微前端父子应用及兄弟应用间组件或方法共享方案

京东科技开发者

【漏洞复现】Nodebb 被爆未授权拒绝服务攻击

我再BUG界嘎嘎乱杀

网络安全 漏洞 网安 漏洞复现

Shutterstock完成对Envato的收购

财见

2024-07-24:用go语言,给定一个整数数组 nums,其中至少包含两个元素。 可以根据以下规则执行操作:选择最前面两个元素删除、选择最后两个元素删除,或选择第一个和最后一个元素删除。 每次操作

福大大架构师每日一题

福大大架构师每日一题

MySQL 8.0 字符集与比较规则介绍

Simon

MySQL

异构智算,打赢智算时代「牧野之战」

脑极体

AI

系统整容纪:慢SQL之独家秘籍,离不可替代型人才更近一步

京东科技开发者

【论文速读】| 关于构建基于检索增强生成的聊天机器人的事实

云起无垠

医院采购堡垒机厂商重点推荐-行云管家

行云管家

网络安全 医院 堡垒机 等保合规

探索网络安全:浅析文件上传漏洞

我再BUG界嘎嘎乱杀

网络安全 漏洞 文件上传

28款信息无障碍研究会合作产品通过工信部适老化及无障碍水平评测

信息无障碍研究会

Golang 中 能否将 slice 作为 map 的 key?

伤感汤姆布利柏

Mac应用快速启动器:Alfred 5 for Mac 激活版

你的猪会飞吗

mac软件下载 Mac破解软件

豆瓣评分8.6!破晓大牛仅用一份手册就把Web安全讲明白了!

我再BUG界嘎嘎乱杀

网络安全 WEB安全 网安

基于Java+SpringBoot+Vue前后端分离毕业生实习与就业管理系统设计和实现

hunter_coder

后端开发

流模式vs批模式:你选对了吗?

Apache Flink

大数据 flink 流计算 批处理 flink batch

common-intellisense:助力 TinyVue 组件书写体验更丝滑

OpenTiny社区

开源 Vue 前端 组件库 OpenTiny

基于Java+SpringBoot+Vue前后端分离毕业生实习与就业管理系统设计和实现

hunter_coder

后端开发

Idea 永久激活教程

源字节1号

小程序 开源 后端

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