美化效果的属性:
(一)
column-gap主要来设置列与列之间的间距:
语法:column-gap: normal || <length>
1)默值为1em(如果你的字号是px,其默认值为你的font-size值)。
2)length的话,使用px,em单位的任何整数值,但不能是负值。
(二)
column-span 跨列设置,定义一个分列元素中的子元素能跨列多少。
语法:column-span: none | all
默认值none表示不跨越任何列。all表示元素跨越所有列,并定位在列的Z轴之上。
(三)
column-rule 用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于常用的border属性,但是
不占用任何空间位置的!
语法:column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
1)column-rule-width默认值为medium,接受任意浮点数,但不接收负值。
2)column-rule-style默认值为“none”,与border-style属值相同,
包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
3) column-rule-color定义列边框颜色,其默认值为前景色color的值。
.columns {
padding: 5px;
border: 1px solid green;
width: 900px;
margin: 20px auto;
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
-ms-column-count:3;
column-count:3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-o-column-gap: 2em;
-ms-column-gap: 2em;
column-gap: 2em;
-webkit-column-rule: 3px gray solid;
-moz-column-rule: 3px gray solid;
-o-column-rule: 3px gray solid;
-ms-column-rule: 3px gray solid;
column-rule: 3px gray solid;
}
h2{
background: green;
padding: 10px;
color: #fff;
}
h2,
p:nth-child(2n){
-webkit-column-span:all;
-moz-column-span:all;
-o-column-span:all;
column-span:all;
}
<div class="columns">
<h2>我要分列显示</h2>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
<p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。</p>
</div>
google亲测成功:
ff测试未显示。
- 大小: 218 KB
分享到:
相关推荐
使用CSS3多列布局属性.ppt
CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与美化CSS网站布局与...
第28章 CSS3多列布局.pdf
CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...
DIV+CSS网页布局与美化,div,css,web2.0
CSS3设计多列布局.pdf 学习资料 复习资料 教学资源
DIV+CSS实现3列布局,初学div css的经典例子
jQuery+CSS3网页表单元素美化代码是一款在原生HTML表单的基础上进行美化,并使用jQuery来制作label动画效果,通常用于美化联系方式表单。
CSS3设计多列布局案例.pdf 学习资料 复习资料 教学资源
html5 css3在线留言表单美化代码
css常用的网页布局样式属性
多列布局CSS多列布局继承自块级布局模式,允许简单地定义多列文本。 一行太长的文字读起来很麻烦;...有两个CSS属性控制是否实现多列布局和显示多少列: column-count and column-width。 属性 colum
HTML5.CSS3网页布局和样式精粹欢迎大家下载!
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
布局与美化网页的. 布局与美化网页的. 布局与美化网页的. css
DIV+CSS布局:CSS浮动float属性详解 不解释
DIV+CSS已经是目前流行的网页版面布局方式,他比表格方式节约了许多代码,降低了网络数据量,特别对于大型网站来说,采用DIV+CSS的页面布局方式尤其重要.本书对比标准与非标准的布局差异,揭秘DIV+CSS的神奇魅力,使用最...
HTML5 + CSS3 实现 3d 室内布局源码。
NULL 博文链接:https://onestopweb.iteye.com/blog/2232129
资源名称:HTML5 CSS3网页布局和样式精粹内容简介:对于初入门的网页设计者和开发者而言,学习网页设计和开发就应该从html5和css3开始,这是毋庸置疑的。对于有经验的工程师来说,如果想完整掌握html5和css3新技术,...