在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
这是一个adobe的提议:css Regions,提供在多个不同元素中排布内容的方法。首先需要为内容容器声明一个flow属性独一无二的字符值,然后通过from()函数和内容的属性确定内容将会在哪些元素内排布: region布局效果 现在,让我们了解这个扩展吧,他们可以被分为4类: 线性内容(Threading content): 从一个区域“流向”另一个区域的内容。 下面是各种分类的例子: 在典型的HTML文档中,文字可以在多个区域显示,但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本,或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时,这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能,或者,当显示在平板上时,自适应竖屏(portrait)或者横屏(landscape)显示。 文字跨3个不同宽的列显示 如果你想要单独地指定一托内容(比如文字和图片),那些内容如何在一串区域内显示(flow)呢?这正是内容流(content flow)要做的。 要使用它,通过flow属性赋予内容的容器一个名字,这样做会将内容从普通的CSS布局流中去掉,然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。 上面的三列布局的代码如下: CSS CSS Code复制内容到剪贴板
HTML XML/HTML Code复制内容到剪贴板
你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定,将会使用正常的文档顺序。 通过这个简单的构件,你可以实现更复杂的布局,包括多列文本、不同宽高的列,以及跨越多个列的区域。 文字穿越堆叠的区域和列 使用形状环绕,你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。 文字内容显示在自定义形状的内部 要使用这个特性,你需要使用wrap-shape属性来定义形状,并设定wrap-shape-mode属性为需要的值。通过制定content的值,文字将显示在形状内部。 上面的现实心形的代码如下: CSS CSS Code复制内容到剪贴板
HTML XML/HTML Code复制内容到剪贴板
我们的基于WebKit原型支持使用一个简单的多边形指定一个形状,但是你可以想象其它的集合体也可以被用于设定形状,或者甚至使用一张图片的alpha值。。。 通过使用wrap-shap-mode属性的其它值,你可以创建不同的效果,包括指定的wrap-shape 属性可以理解为要完全避开的区域 文字环绕在自定义图形周围 CSS CSS Code复制内容到剪贴板
HTML XML/HTML Code复制内容到剪贴板
区域样式(Region Styling) 在杂志中,指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction标题的部分)被设定为深蓝色,而余下的文字则为灰色 文字样式依赖它流入的区域 CSS CSS Code复制内容到剪贴板
HTML XML/HTML Code复制内容到剪贴板
区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。 |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论