AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

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

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

关注

评论

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

软件测试 | 低学历无未来?从小公司到拿下年薪45W+,这个小哥哥好励志~

测吧(北京)科技有限公司

测试

出手即不凡,一年共投408个公司,人均退出近5个 | 创业邦2023女性投资人榜单发布

创业邦

应对网络不可靠挑战,用 OpenYurt 实现边缘业务连续性

阿里巴巴云原生

阿里云 开源 云原生 openyurt

微软云与 OpenAI 竞争 ChatGPT 企业级客户:安全性、老客户、多云、模型迭代效率

B Impact

软件工程高效学 | 实践工具:Microsoft Office Visio

TiAmo

开发工具 Visio绘图注释工具

Cocos携手乐元素 《开心消消乐》成功移植OpenHarmony

最新动态

【4月8日】Elastic 中国开发者大会 2023 议程预告

极限实验室

大数据 elasticsearch elastic 开源 开发者大会

java实现布隆过滤器

小小怪下士

Java 程序员 布隆过滤器

百度数据可视化Sugar BI:问卷数据收集、分析与展现

百度开发者中心

大数据 百度智能云 sugar

不降功能只降资源,六个应用场景带你了解OCP Express

OceanBase 数据库

数据库 oceanbase

ChatGPT 开源了第一款插件,都来学习一下源码吧!

Python猫

Nautilus Chain 首个生态基础设施 Poseiswap,公布空投规则

股市老人

pytest学习和使用5-Pytest和Unittest中的断言如何使用?

Python 自动化测试 pytest 测试报告 Allure

数字云南的那山,那水,那些人

脑极体

5G

周鸿祎谈“360GPT”两翼齐飞战略;SaaS生态百家接入、120万家企业用户、2千万终端用户

B Impact

魔法诗~~~一套基于Vue开发的实用、高端、炫酷的响应式前端网页!!!

京茶吉鹿

Vue 前端 网页设计

软件测试 | 从手工转到测试开发,是种什么样的体验?

测吧(北京)科技有限公司

测试

即刻报名|Kyligence 指标平台产品发布会

Kyligence

数据分析 指标平台

让创新更多元,让世界更美好,2023女性影响力峰会圆满举办

创业邦

IntelliJ IDEA 2023.1 版本可以安装了

HoneyMoose

百度数据可视化Sugar BI:数据监控与预警

百度开发者中心

大数据 百度智能云 sugar

文心一言更大的故事是在云计算

百度开发者中心

百度智能云 文心一言

又见版本升级!一句话概括 Milvus 2.2.4:资源隔离、多云、高效

Zilliz

非结构化数据 Milvus Zilliz

kafka Log存储解析以及索引机制

石臻臻的杂货铺

kafka

c4d超强三维动画设计:CINEMA 4D Studio R2023.2.0 中文激活版

真大的脸盆

Mac Mac 软件 C4D

避免使用CSS @import 影响页面加载速度

南城FE

CSS css3 前端

履约核心引擎低代码化原理与实践

京东科技开发者

低代码 规则引擎 企业号 3 月 PK 榜 履约中心

面向 Web、微服务应用的 Serverless 托管平台云应用引擎 CAE

宇宙之一粟

云服务器 CAE 云应用

AI训练性能提升30%,阿里云发布GPU计算裸金属实例ebmgn7ex

云布道师

弹性计算

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