文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3的Regions扩展的示例分析

2024-04-02 19:55

关注

本篇文章给大家分享的是有关CSS3的Regions扩展的示例分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

这是一个adobe的提议:css Regions,提供在多个不同元素中排布内容的方法。首先需要为内容容器声明一个flow属性独一无二的字符值,然后通过from()函数和内容的属性确定内容将会在哪些元素内排布:
1. .content { flow: foo; }
2. .target1, .target2 { content: from(foo); }
首先将内容容器中的内容放置到第一个元素target1中,如果有溢出,就将溢出的部分放在target2中显示。说得更明白一点,她不是在另一个target中重复内容,而是继续在第二个target中显示1中没有完全显示的内容。请看下面的例子:
CSS3的Regions扩展的示例分析

region布局效果
随便说一下,两个目标区域不需要在DOM或者布局中相邻,如果需要的话,她们完全可以是同一个页面的两个毫不相干的人或者仇人(但是这样的话会带来可及性问题)。
Regions和Exclusions一样还不被任何浏览器支持,但是你可以从adobe的实验室中下载它,亲自试一试。

现在,让我们了解这个扩展吧,他们可以被分为4类:

    线性内容(Threading content): 从一个区域“流向”另一个区域的内容。
    任意形状的容器(Arbitrarily shaped containers): 在非矩形区域内显示文本。
    任意形状环绕(Arbitrarily shaped exclusion): 文本环绕非矩形区域。
    区域样式(Region styling):根据流向区域显示内容。

下面是各种分类的例子:
内容流(Content flow)

在典型的HTML文档中,文字可以在多个区域显示,但是每个区域中的文字是不相关的(见图1)。如果你想要跨多个列显示文本,或者使用别的你需要的更复杂的区域来手动。在用户放大文字或者用户的字体比你设定的字体大时,这可能会无法乱掉。这个方法(css3 region)同样是的拥有在缩放窗口是自适应的流体布局成为可能,或者,当显示在平板上时,自适应竖屏(portrait)或者横屏(landscape)显示。
CSS3的Regions扩展的示例分析

CSS3的Regions扩展的示例分析

文字跨3个不同宽的列显示

如果你想要单独地指定一托内容(比如文字和图片),那些内容如何在一串区域内显示(flow)呢?这正是内容流(content flow)要做的。

要使用它,通过flow属性赋予内容的容器一个名字,这样做会将内容从普通的CSS布局流中去掉,然后你可以插入这个线程到1个或多个其他区域——使用from()作为content属性的值。

上面的三列布局的代码如下:

CSS

CSS Code复制内容到剪贴板

  1. #source {   

  2.     flow: "main-thread";    

  3. }    

  4. .region {    

  5.     content: from(main-thread);    

  6.     background: #C5DFF0;    

  7. }  

HTML

XML/HTML Code复制内容到剪贴板

  1. <div id="source"> <p>Lorem ipsum dolor [...]</p> </div>     

  2. <div id="region1" class="region"></div>     

  3. <div id="region2" class="region"></div>     

  4. <div id="region3" class="region"></div>    

你可以在一个页面中联合多个命名的flow。你也可以使用content-order属性来控制文字流的顺序。如果没有指定,将会使用正常的文档顺序。

通过这个简单的构件,你可以实现更复杂的布局,包括多列文本、不同宽高的列,以及跨越多个列的区域。

文字穿越CSS3的Regions扩展的示例分析堆叠的区域和列
形状环绕(Wrap shape)

使用形状环绕,你可以控制文字经过区域的形状(见图3)。你也可以使用这个属性搭配内容流或者单独的创建更有趣的设计。
CSS3的Regions扩展的示例分析

文字内容显示在自定义形状的内部

要使用这个特性,你需要使用wrap-shape属性来定义形状,并设定wrap-shape-mode属性为需要的值。通过制定content的值,文字将显示在形状内部。

上面的现实心形的代码如下:

CSS

  1. .circle{   

  2.     wrap-shape: polygon(0px, 150px );   

  3.     wrap-shape-mode: content;    

  4. }    

  5. .heart{   

  6.     wrap-shape: polygon(150px, 32px );    

  7.     wrap-shape-mode: content;    

  8. }  

HTML

  1. <div class="circle"></div>     

  2. <div class="heart"></div>    

我们的基于WebKit原型支持使用一个简单的多边形指定一个形状,但是你可以想象其它的集合体也可以被用于设定形状,或者甚至使用一张图片的alpha值。。。
环绕(Exclusions)

通过使用wrap-shap-mode属性的其它值,你可以创建不同的效果,包括指定的wrap-shape 属性可以理解为要完全避开的区域

CSS3的Regions扩展的示例分析

文字环绕在自定义图形周围

CSS

  1. .exclusion{    

  2.       

  3.     wrap-shape-mode: around;    

  4. }  

HTML

  1. <div class="exclusion circle">     

  2.     <p>Lorem ipsum dolor [...]</p>    

  3. </div>    

区域样式(Region Styling)

在杂志中,指定内容环绕设计中的一个特定的区域是很常见的。我们称之为区域样式。例子展示了文字环绕在第一个区块(包括introduction的部分)被设定为深蓝色,而余下的文字则为灰色
CSS3的Regions扩展的示例分析

文字样式依赖它流入的区域

CSS

  1. p { color: gray: }     

  2. @region-style #region_1 {   

  3.     p { color: #0C3D5F; }    

  4. }  

HTML

  1. <div id="article">     

  2.     <h2>Introduction</h2>  

  3.     <p>This is an example [...]</p>    

  4. </div>     

  5. <div id="region_1"></div>     

  6. <div id="region_2"></div>     

  7. <div id="region_3"></div>     

  8. <div id="region_4"></div>    

区域样式目前还没有在Adobe Labs的这个webkit原型里面实现。

以上就是CSS3的Regions扩展的示例分析,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯