大模型“四虎”出山,亮相 4 月 QCon 北京。 了解详情
写点什么

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

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

关注

评论

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

深入理解static关键字

编程江湖

static关键字

美团李凯揭秘数据库发展三大趋势 | TiDB Hackathon 评委访谈

PingCAP

java开发框架Redis之sentinel和集群

@零度

redis JAVA开发

kafka的优缺点都有那些

编程江湖

kafka

阿里副总裁浅雪对话VMware全球副总裁原欣:阿里云携手VMware,助力企业数字化转型

大咖说

云计算 阿里云 数字化转型 阿里巴巴‘

中年人对酒的看法

wood

300天创作

请说出4种不使用第三方变量交换两个变量值的方法

阿Q说代码

位运算 1月月更 交换变量

1 月月更|盘点 2021|推荐学Java——数据表操作

逆锋起笔

Java MySQL 数据库表 多表查询 关联查询

性能场景之压测策略设计

zuozewei

性能测试 性能分析 1月月更

Linux之chown命令

入门小站

Linux

Java&Go高性能队列之LinkedBlockingQueue性能测试

FunTester

Disruptor 性能测试 消息队列 FunTester 高性能消息队列

前后端分离 -- 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~

Bug终结者

Vue 前后端分离 Java 分布式 elementUI

Vue的动态组件 & 异步组件

编程江湖

Vue

浅谈数据中台和DataFabric的差异

Kafka中文社区

云单元架构,如何赋能数字化转型呢?

博文视点Broadview

快来一起玩转LiteOS组件:RHas

华为云开发者联盟

C语言 LiteOS 组件 RHas 哈希函数库

在线CSS代码压缩美化工具

入门小站

工具

Hive UDF,就这

华为云开发者联盟

sql 函数 UDF Hive UDF 用户自定义函数

前端开发之CSS样式——自定义滚动条

@零度

CSS 前端开发

ReactNative进阶(十):WebView 应用详解

No Silver Bullet

webview React Native 1月月更

查询 MySQL 字段注释的 5 种方法!

王磊

表设计之数据类型优化

Ayue、

数据库 1月月更

netty系列之:JVM中的Reference count原来netty中也有

程序那些事

Java Netty 程序那些事 1月月更

Apache Flink 不止于计算,数仓架构或兴起新一轮变革

Apache Flink

大数据 flink 编程 实时计算 流式数仓

【Spring专场】「MVC容器」不看源码就带你认识核心流程以及运作原理

洛神灬殇

springmvc Spring Framework Spring MVC 1月月更

教你如何在Spark Scala/Java应用中调用Python脚本

华为云开发者联盟

Python spark 脚本 Spark Scala Spark java

AI开发平台系列2:集成式机器学习平台对比分析

Baihai IDP

AI

前端质量提升利器-马可代码覆盖率平台

vivo互联网技术

前端 代码 平台架构

谁说count(*) 性能最差,我需要跟你聊聊

华为云开发者联盟

函数 count 字符 数据表

魔电熊户外电源体验|让户外露营实现用电自由!

科技热闻

SAP HANA Delivery Unit概念简述

汪子熙

数据库 内存数据库 1月月更

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