css3 region:基于html和css3的富页面布局

css3 region:基于html和css3的富页面布局

ID:16241432

大小:442.50 KB

页数:11页

时间:2018-08-08

css3 region:基于html和css3的富页面布局_第1页
css3 region:基于html和css3的富页面布局_第2页
css3 region:基于html和css3的富页面布局_第3页
css3 region:基于html和css3的富页面布局_第4页
css3 region:基于html和css3的富页面布局_第5页
资源描述:

《css3 region:基于html和css3的富页面布局》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、CSS3Region:基于HTML和CSS3的富页面布局译自:CSS3regions:RichpagelayoutwithHTMLandCSS3中文:CSS3Region:基于HTML和CSS3的富页面布局请尊重版权,转载请注明来源,多谢!互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而,当为印刷设计内容时,一些功能显然仍然不可能或者很难使用Web标准来实现。印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。Adobe通过增强CSS进行了一些实验来展示一

2、些传统杂志使用的复杂布局。我们也提交了一些建议到W3CCSS工作组,并构建了一个原型来通过webkit实现这些提案。你可以从AdobeLabs下载这些原型体验下。然后你也可以在CSSRegionsModule和这个W3C网站上的CSSExclusionsModule页面找到W3C编写的草案。你也可以订阅W3CCSS邮件列表来讨论这个问题。欢迎在邮件标题中加入”[css3-regions]“或者”[css3-exclusions]“来在这个邮件组中讨论这个问题。当然也可以通过AdobeLabs的CSSRegions论坛反馈问题。一些说明:这是个在进行中的工

3、作。随着我们和广大社区的讨论,我们将会做些改变。本文中用到的语法反映出当前W3C草案的现状,但是随着W3C工作组和社区的探讨可能会有些进化。同时也请注意,按照惯例,所有的新的数学将会首先采用-webkit-前缀。不过,为了简化,我在本文中省去了这个前缀。现在,让我们了解这个扩展吧,他们可以被分为4类:·线性内容(Threadingcontent):从一个区域“流向”另一个区域的内容。·任意形状的容器(Arbitrarilyshapedcontainers):在非矩形区域内显示文本。·任意形状环绕(Arbitrarilyshapedexclusion):文

4、本环绕非矩形区域。·区域样式(Regionstyling):根据流向区域显示内容。下面是各种分类的例子:内容流(Contentflow)在典型的HTML文档中,文字可以在多个区域显示,但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本,或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时,这可能会无法乱掉。这个方法(css3region)同样是的拥有在缩放窗口是自适应的流体布局成为可能,或者,当显示在平板上时,自适应竖屏(portrait)或者横屏(landscape)显示。图1.文字跨3个不同宽的列显

5、示如果你想要单独地指定一托内容(比如文字和图片),那些内容如何在一串区域内显示(flow)呢?这正是内容流(contentflow)要做的。要使用它,通过flow属性赋予内容的容器一个名字,这样做会将内容从普通的CSS布局流中去掉,然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。上面的三列布局的代码如下:CSS1234567#source{flow:"main-thread";}.region{content:from(main-thread);background:#C5DFF0;}HTML12

6、source">

Loremipsumdolor[...]

34567
你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定,将会使用正常的文档顺序。通过这个简单的构件,你可以实现更复杂的布局,包括多列文本、不同宽高的列,以及跨越多个列的区域。(见图2)

7、图2.文字穿越堆叠的区域和列形状环绕(Wrapshape)使用形状环绕,你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。图3.文字内容显示在自定义形状的内部要使用这个特性,你需要使用wrap-shape属性来定义形状,并设定wrap-shape-mode属性为需要的值。通过制定content的值,文字将显示在形状内部。上面的现实心形的代码如下:CSS1234567891011.circle{/*定义元素形状为一个圆*/wrap-shape:polygon(0px,150px/*...更多点*/);wrap

8、-shape-mode:content;}.heart{/*定义元素形状为心形*

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签