css3 column属性的应用

1、案例源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 columns 属性</title>
<style>
*{margin: 0;padding: 0}
.container{
width: 1000px;
margin: 5px auto;
column-count: 4;-webkit-column-count: 4;-moz-column-count: 4;
column-gap: 30px;-webkit-column-gap: 30px;-moz-column-gap: 30px;
column-rule-width: 5px;-webkit-column-rule-width: 5px;-moz-column-rule-width: 5px;
column-rule-style: outset;-webkit-column-rule-style: outset;-moz-column-rule-style: outset;
column-rule-color: #ff0000;-webkit-column-rule-color: #ff0000;-moz-column-rule-color:#ff0000;
}
</style>
</head>
<body>
<div class="container">
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
欢迎您欣赏我的博客，希望您能获得意想不到收获。欢迎您欣赏我的博客，希望您能获得意想不到收获。
</div>
</body>
</html>

2、案例效果

CSS3 column属性的更多相关文章

  1. 多列布局 css3 column属性

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  7. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  8. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  9. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

随机推荐

  1. 前端系列之CSS基础知识概述

    1.什么是DIV (1).div就是html一个普通标签,进行区域划分.特性:独自占一行.独自不能实现复杂效果.必须结合css样式进行渲染. (2).div通常其是块级元素 (3).div是定义文档中 ...

  2. 前端系列之JavaScript基础知识概述

    ​微信公众号:compassblog 欢迎关注,欢迎转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.什么是JavaScript (1).JavaScript是web上一种功能强大的编程语 ...

  3. python爬虫（6）——正则表达式（三）

    下面,我再写一个例子,加强对正则表达式的理解.还是回到我们下载的那个二手房网页,在实际中,我们并不需要整个网页的内容,因此我们来改进这个程序,对网页上的信息进行过滤筛选,并保存我们需要的内容.打开ch ...

  4. php 数组变成树状型结构

    <? php $stime = microtime(true); $nodes = [ ['id' = > 1, 'pid' = > 0, 'name' = > 'a'], [ ...

  5. 通过SVG与CSS3实现向上图标

    需求 H5活动页需要用的图标很少,暂时没有使用iconfont的必要性,而通过图片的话额外增加UI的工作量以及增加请求数,前端也有很多实现简单图标的方法,所以就尝试自己去解决,写一个"返回顶 ...

  6. [Codeforces]817F. MEX Queries 离散化+线段树维护

    [Codeforces]817F. MEX Queries You are given a set of integer numbers, initially it is empty. You sho ...

  7. Linux socket 类封装 （面向对象方法）

    /* * socketfactory.h * * Created on: 2014-7-19 * Author: root */ #ifndef SOCKETFACTORY_H_ #define SO ...

  8. 最长周长三角形 O(nlogn)

    题意   有根棍子,棍子的长度为.想要从中选出三根棍子组成周长尽可能长的三角形.请输出最大的周长,若无法组成三角形输出0. 思路   很容易想到采用三重循环来枚举所有三角形,复杂度为.   更好的办法 ...

  9. POJ - 2253 Frogger 单源最短路

    题意:给定n个点的坐标,问从第一个点到第二个点的最小跳跃范围.d(i)表示从第一个点到达第i个点的最小跳跃范围. AC代码 #include <cstdio> #include <c ...

  10. 基于 HTML5 Canvas 的交互式地铁线路图

    前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是 ...