美化效果的属性:
(一)
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
分享到:
相关推荐
2. 浮动(Float):浮动常用于创建多列布局,通过`float:left`或`float:right`让元素向左或向右移动,允许其他元素环绕。 3. 定位(Positioning):`position`属性有`static`、`relative`、`absolute`和`fixed`等值...
《美工神话:CSS网站布局与美化》是一本专注于CSS技术在网站设计中的应用书籍,旨在帮助读者掌握CSS的基础语法并提升网站布局与美化的能力。CSS(层叠样式表)是网页设计的核心技术之一,它负责定义网页内容的外观、...
Bootstrap的网格系统采用12列布局,通过调整行(row)和列(column)的组合,可以轻松创建灵活的布局。在这个特效中,购物卡片被组织成响应式的网格,确保在各种设备上都能保持良好的视觉效果。 接下来,我们关注CSS3的...
再者,Grid布局则进一步增强了网页布局的灵活性,使得复杂的网格系统设计变得简单易行,对于多列的表单布局尤其有用。 至于“html5和css3表单样式美化插件”,这类工具通常集成了上述特性,提供了一套预设的样式和...
"css样式"标签强调了此代码主要关注CSS的使用,这不仅包括基本的样式设置,还可能涉及到CSS3的新特性,如阴影(box-shadow)、渐变(linear-gradient)、圆角(border-radius)、多列布局(column-count)以及动画...
此外,还可以利用CSS3的新特性,如渐变、过渡、动画、多列布局、Flexbox和Grid布局,以及媒体查询实现更高级的视觉效果和交互体验。 例如,通过设置背景图片和透明度,可以创建出别具光芒的效果。使用CSS3的径向...
网格布局则是通过`display: grid`或`display: flex`来创建多列或多行的布局,可以灵活地调整元素的位置和尺寸。 SVG(可缩放矢量图形)在这里起到了关键作用,它是一种基于XML的图形格式,可以在网页上绘制高质量的...
通过CSS,我们可以对这些`<div>`元素进行样式设置,比如设置边距、填充、背景色、字体等,从而实现页面的布局和美化。 CSS在网页布局中的作用主要体现在以下几个方面: 1. **盒模型**:CSS盒模型是理解布局的关键...
4. **Flexbox和Grid布局**:介绍现代CSS布局系统,如Flexbox(弹性盒模型)和Grid(网格布局),以及它们如何简化多列和复杂布局的设计。 5. **CSS选择器**:深入探讨CSS选择器的使用,包括类选择器、ID选择器、伪...
7. **CSS3新特性**:探索CSS3的新特性,如过渡(transitions)、动画(animations)、阴影(box-shadow)、渐变(gradients)、圆角(border-radius)和多列布局(column)等,提升网页的视觉效果。 8. **Flexbox布局**:学习...
CSS 网页美化技术概述 CSS(Cascading Style Sheets)是一种样式表语言,用于为 HTML 文档定义布局和显示。它可以省去大量时间,让您可以采用一种全新的方式来设计网站。CSS 是每个网页设计人员所必须掌握的。 CSS...
在实践中,读者将学习到如何创建网格系统、实现多列布局、处理浮动元素、使用定位技巧,以及如何适配不同屏幕尺寸的设备,实现跨平台的网页设计。 源代码的提供则为读者提供了直接参考和学习的资源,通过查看和分析...
5. **浮动布局**:浮动(float)是早期网页布局常用的方法,通过让元素浮动到左右两侧,可以实现多列布局。但需要注意清除浮动,防止影响其他元素。 6. **Flexbox布局**:Flexbox(弹性盒模型)是现代CSS布局模型,...
这一章介绍了更复杂的布局策略,如多列平衡、瀑布流布局等。通过实例,读者可以提升布局技巧,应对更多样化的网页设计需求。 第9章:网页打印与打印样式 本章关注网页的打印优化,讲解如何使用CSS控制打印样式,...
2. 浮动(float):`float:left`或`float:right`常用于创建多列布局,元素会尽可能向左或向右浮动,直到碰到容器边缘或其他浮动元素。 3. 定位(position):`position`属性(如static、relative、absolute、fixed)用于...
CSS3引入了许多新特性,如伪类和伪元素、多列布局、 Flexbox 和 Grid、以及更强大的颜色和过渡效果。 **详细知识点:** 1. **CSS选择器**:选择器是匹配HTML元素的方式,如类选择器、ID选择器、元素选择器、属性...
近年来,`CSS` 引入了新的布局模式,如 Flexbox 和 Grid,大大简化了复杂的多列布局。Flexbox 适用于一维布局,如导航栏、响应式设计,而 Grid 更适合二维布局,如网站主内容区。 总的来说,通过熟练掌握 `DIV` ...
浮动有助于创建多列布局,但也会导致父元素高度塌陷的问题,因为浮动元素不再占据原来在文档流中的空间。 为了解决这个问题,我们需要清除浮动。清除浮动有两种常见方法:一是使用clear属性,如clear:left、clear:...
浮动常常用于创建多列布局。 行框和清理是指清除浮动的一种方法,以避免浮动对页面布局产生的不良影响。通常使用clear属性来实现这一点,确保元素不与浮动元素重叠。 使用区块框设计页面布局时,会涉及到布局的...
2. **多列布局**:CSS3引入了多列布局,通过`column-count`, `column-gap`, `column-width`等属性,使得内容可以自动分列显示,类似于报纸的版面设计。 3. **边框与背景**:新增加的圆角边框(`border-radius`)、...