CSS3区域模块region相关编写示例

发布时间:2017-04-09 21:11 来源:互联网 当前栏目:网页设计教程

   印刷媒体,例如一本杂志或一份报纸,相比网站最大的优势是完全灵活的安排页面和段落布局。例如,印刷媒体已经能够优雅地在多个列中填充内容,甚至复杂到如下面屏幕截图所示。

  然而,由于Web的内容结构,试图在web上模仿类似的布局非常棘手。

  为了使页面布局更加灵活到如印刷媒体一般,一个新的CSS3模块出现了——CSS3 regions。相比通常的在多个元素中放置内容,此模块允许内容流在页面的指定区域(regions)放置。

  让我们看看这个模块是如何工作的。

  大家在理解css region的时候,可以这么理解,我在文档中放了一个容器,这个容器装满了水。但是我想把水分到a区域 b区域 c区域,我不需要人工去“分”这个水,而是让浏览器去分配这些水到这些区域内。因此水装到哪个容器是无所谓的,分完了就不显示了,你只需要告诉区域跟大容器,区域是放水的地方,容器是取水的地方即可。

  启用浏览器实验特性

  此模块仍处于实验阶段,目前只在Google Chrome和ie下面支持带前缀的属性。如果您使用的是Google Chrome首先需要启用实验特性。在地址栏输入chrome:/ /flags/。设置”启用实验WebKit特性”为enabled状态。

  基本用例

  在这个例子中,我们将有两个类型的内容:主要内容和次要内容。区域1,2和4中我们填充主要内容,而次要内容将显示在区域3,见下图。

  HTML

  让我们开始写HTML结构。

  CSS3区域模块是不受结构限制的,因此我们可以简单地把次要内容部分的html添加到主要内容外,正如我们上面提到的,我们将在主要内容的中部显示次要内容。

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

<header class="cf"> <h1><span>Lorem ipsum dolor sit amet,</span> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</h1> <h2>labore et dolore magna aliqua</h2> </header>   <article class="cf"> <p>Lorem ipsum dolor sit amet, consectetur ...</p> </article>   <aside> <p><img src="img/stat.jpg" width="500" height="300"></p> <p>Lorem ipsum dolor sit amet, consectetur ...
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、