您好,盖德化工网欢迎您,[请登录]或者[免费注册]
  您现在的位置: 主页 > 493333开马 >
  • 企业实名认证:已实名备案
  • 荣誉资质:0项
  • 企业经济性质:私营独资企业
  • 86-0571-85586718
  • 13336195806
  • IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局黄大仙精准码最全
来源:本站原创  作者:admin  更新时间:2019-11-21  浏览次数:

  CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。

  对于一些不支持多列布局特征的浏览器,比如IE9/IE8,会把这些属性全部忽略,这样布局就呈现出传统的单块布局。为了保证浏览器最大的兼容性,我们在使用多列布局属性时,最好添加浏览器引擎前缀,最基本的要加上三种:谷歌浏览器的-webkit-,火狐浏览器的-moz-,IE浏览器的-ms-,最后,别忘了不带前缀的写法。

  不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count和 column-width。

  这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法,比如火狐浏览器、谷歌浏览器,IE10+等),在这里我们使用了column-count兼容浏览器,使用浏览器打开这个html文件,效果如图1所示:

  (2)column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。将上例的CSS代码替换如下:

  这将会使文本里的内容被分成若干列,每列的宽度为10em,分栏效果如图2所示:

  两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值,将上例的分栏宽度为20em,分栏间隔为2em。将上例的CSS代码替换如下:

  这将会使文本里的内容被分成若干列,每列的宽度为20em,分隔间隔为2em,效果如图3所示:

  column-rule属性是一个简写属性,用于设置所有column-rule-* 属性。它们的参数及描述如表2:

  其中,column-rule-style有以下可选值,它们的取值及描述如表3:

  下面,我们将把文本分为三栏,并给出2em的缝隙间隔,每栏间隔都给一个黑色的虚线间隔符。黄大仙精准码最全资料。CSS代码如下:

  这将会使文本里的内容被分三列,分隔间隔为2em,分隔符为黑色虚线 column-rule分栏符

  CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。