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. Vue脚手架（vue-cli）安装总结

    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...

  2. python脚本0b文件处理

    要处理的文件: 此处处理将00的数据干掉. 处理python脚本: dir_fd = open('abc.yuv','rb+') tmp_fd = open('tmp.yuv','wb+') whil ...

  3. linux下qt的安装

    2.1环境的搭建 linux-> 2.1.1 ./qt-opensource-linux-x86-5.5.0.run 2.1.2 vim /etc/profile (.bashrc) expor ...

  4. git使用步骤_2017

    (部署项目) zbot deploy developer   git对文件chmod 777后导致status发生变化,使用: git config core.fileMode false    [当 ...

  5. springboot入门_helloworld

    开始学习springboot,在此做记录,有不正确之处,还望读者指正. springboot框架的设计目的是用来简化新Spring应用的初始环境搭建以及开发过程.主要体现有:1 xml配置文件,使用s ...

  6. css实现多行多列的布局

    1.两列多行: HTML: <div class="box1"> box1:实现两列多行布局 <ul> <li>111</li> & ...

  7. js中boolean类型的理解

    <html> <head> <script type="text/javascript"> var x="12"; aler ...

  8. LeetCode第六天

    第六天 30.(219) Contains Duplicate II JAVA class Solution { public boolean containsNearbyDuplicate(int[ ...

  9. LNK2026 模块对于 SAFESEH 映像是不安全的

    解决方法如下: 配置属性 -> 链接器 -> 命令行 位置添加如下内容: /SAFESEH:NO

  10. Codeforces785E - Anton and Permutation

    Portal Description 对一个长度为\(n(n\leq2\times10^5)\)的数列\(a\)进行\(m(m\leq5\times10^4)\)次操作,数列初始时为\(\{1,2,. ...