`

css3多列布局美化属性

    博客分类:
  • CSS3
 
阅读更多
美化效果的属性:

(一)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
分享到:
评论

相关推荐

    布局与美化网页的CSS教程

    2. 浮动(Float):浮动常用于创建多列布局,通过`float:left`或`float:right`让元素向左或向右移动,允许其他元素环绕。 3. 定位(Positioning):`position`属性有`static`、`relative`、`absolute`和`fixed`等值...

    美工神话:CSS网站布局与美化

    《美工神话:CSS网站布局与美化》是一本专注于CSS技术在网站设计中的应用书籍,旨在帮助读者掌握CSS的基础语法并提升网站布局与美化的能力。CSS(层叠样式表)是网页设计的核心技术之一,它负责定义网页内容的外观、...

    CSS3商城购物卡片布局动画特效

    Bootstrap的网格系统采用12列布局,通过调整行(row)和列(column)的组合,可以轻松创建灵活的布局。在这个特效中,购物卡片被组织成响应式的网格,确保在各种设备上都能保持良好的视觉效果。 接下来,我们关注CSS3的...

    html5和css3表单样式美化插件

    再者,Grid布局则进一步增强了网页布局的灵活性,使得复杂的网格系统设计变得简单易行,对于多列的表单布局尤其有用。 至于“html5和css3表单样式美化插件”,这类工具通常集成了上述特性,提供了一套预设的样式和...

    CSS3天气预报卡片布局代码.zip

    "css样式"标签强调了此代码主要关注CSS的使用,这不仅包括基本的样式设置,还可能涉及到CSS3的新特性,如阴影(box-shadow)、渐变(linear-gradient)、圆角(border-radius)、多列布局(column-count)以及动画...

    DIV+CSS 网页布局与美化 别具光芒

    此外,还可以利用CSS3的新特性,如渐变、过渡、动画、多列布局、Flexbox和Grid布局,以及媒体查询实现更高级的视觉效果和交互体验。 例如,通过设置背景图片和透明度,可以创建出别具光芒的效果。使用CSS3的径向...

    这是一款使用html5svg和css3制作的炫酷select下拉菜单美化效果

    网格布局则是通过`display: grid`或`display: flex`来创建多列或多行的布局,可以灵活地调整元素的位置和尺寸。 SVG(可缩放矢量图形)在这里起到了关键作用,它是一种基于XML的图形格式,可以在网页上绘制高质量的...

    经典CSS+DIV布局模板

    通过CSS,我们可以对这些`&lt;div&gt;`元素进行样式设置,比如设置边距、填充、背景色、字体等,从而实现页面的布局和美化。 CSS在网页布局中的作用主要体现在以下几个方面: 1. **盒模型**:CSS盒模型是理解布局的关键...

    别具光芒DIV+CSS网页布局与美化PDF

    4. **Flexbox和Grid布局**:介绍现代CSS布局系统,如Flexbox(弹性盒模型)和Grid(网格布局),以及它们如何简化多列和复杂布局的设计。 5. **CSS选择器**:深入探讨CSS选择器的使用,包括类选择器、ID选择器、伪...

    别具光芒-DIV+CSS网页布局与美化.李烨.源代码

    7. **CSS3新特性**:探索CSS3的新特性,如过渡(transitions)、动画(animations)、阴影(box-shadow)、渐变(gradients)、圆角(border-radius)和多列布局(column)等,提升网页的视觉效果。 8. **Flexbox布局**:学习...

    100多页的CSS网页美化技术

    CSS 网页美化技术概述 CSS(Cascading Style Sheets)是一种样式表语言,用于为 HTML 文档定义布局和显示。它可以省去大量时间,让您可以采用一种全新的方式来设计网站。CSS 是每个网页设计人员所必须掌握的。 CSS...

    精通DIV+CSS网页样式与布局

    在实践中,读者将学习到如何创建网格系统、实现多列布局、处理浮动元素、使用定位技巧,以及如何适配不同屏幕尺寸的设备,实现跨平台的网页设计。 源代码的提供则为读者提供了直接参考和学习的资源,通过查看和分析...

    别具光芒DivCSS网页布局与美化 源码

    5. **浮动布局**:浮动(float)是早期网页布局常用的方法,通过让元素浮动到左右两侧,可以实现多列布局。但需要注意清除浮动,防止影响其他元素。 6. **Flexbox布局**:Flexbox(弹性盒模型)是现代CSS布局模型,...

    别具光芒Div+Css网页布局与美化实例

    这一章介绍了更复杂的布局策略,如多列平衡、瀑布流布局等。通过实例,读者可以提升布局技巧,应对更多样化的网页设计需求。 第9章:网页打印与打印样式 本章关注网页的打印优化,讲解如何使用CSS控制打印样式,...

    DIV+CSS网页样式与布局实例

    2. 浮动(float):`float:left`或`float:right`常用于创建多列布局,元素会尽可能向左或向右浮动,直到碰到容器边缘或其他浮动元素。 3. 定位(position):`position`属性(如static、relative、absolute、fixed)用于...

    CSS精通CSS+DIV网页样式与布局

    CSS3引入了许多新特性,如伪类和伪元素、多列布局、 Flexbox 和 Grid、以及更强大的颜色和过渡效果。 **详细知识点:** 1. **CSS选择器**:选择器是匹配HTML元素的方式,如类选择器、ID选择器、元素选择器、属性...

    DIV+CSS美化网站实用教程

    近年来,`CSS` 引入了新的布局模式,如 Flexbox 和 Grid,大大简化了复杂的多列布局。Flexbox 适用于一维布局,如导航栏、响应式设计,而 Grid 更适合二维布局,如网站主内容区。 总的来说,通过熟练掌握 `DIV` ...

    使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx

    浮动有助于创建多列布局,但也会导致父元素高度塌陷的问题,因为浮动元素不再占据原来在文档流中的空间。 为了解决这个问题,我们需要清除浮动。清除浮动有两种常见方法:一是使用clear属性,如clear:left、clear:...

    DIV与CSS网页标准化布局

    浮动常常用于创建多列布局。 行框和清理是指清除浮动的一种方法,以避免浮动对页面布局产生的不良影响。通常使用clear属性来实现这一点,确保元素不与浮动元素重叠。 使用区块框设计页面布局时,会涉及到布局的...

    CSS 3 Intellisense Schema 完整安裝包

    2. **多列布局**:CSS3引入了多列布局,通过`column-count`, `column-gap`, `column-width`等属性,使得内容可以自动分列显示,类似于报纸的版面设计。 3. **边框与背景**:新增加的圆角边框(`border-radius`)、...

Global site tag (gtag.js) - Google Analytics