css3 多列布局记
css3 多列布局
多列布局属性:
columns:column-widht和column-count的缩写。
column-width:定义每列列宽度。
column-count:定义分列列数。
column-gap:定义列间距。
column-rule:定义列边框。
column-rule-width:定义列边框的宽度。
column-rule-style:定义列边框的样式。
column-rule-color:定义列边框的颜色。
column-span:定义子元素跨列效果。
column-fill:控制每列列高效果。
<!DOCTYPE html>
<html lang="en" xmlns="http:// www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
-moz-column-gap:20px;
-webkit-column-gap:20px;
column-gap:20px;
-moz-column-rule:double;
-webkit-column-rule:double;
column-rule:double;
}
h1{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
text-align:center;
border-bottom:double;
}
</style>
</head>
<body>
<h1>淮阴侯韩信</h1>
<p>后数日,蒯通复说曰:“夫听者事之候也,计者事之机也,听过计失而能久安者,鲜矣。听不失一二者,不可乱以言;计不失本末者,不可纷以辞。夫随厮养之役者,失万乘之权;守儋石之禄者,阙卿相之位。故知者决之断也,疑者事之害也,审豪氂之小计,遗天下之大数,智诚知之,决弗敢行者,百事之祸也。故曰‘猛虎之犹豫,不若蜂虿之致螫;骐骥之局躅,不如驽马之安步;孟贲之狐疑,不如庸夫之必至也;虽有舜禹之智,吟而不言,不如瘖聋之指麾也’。此言贵能行之。夫功者难成而易败,时者难得而易失也。时乎时,不再来。原足下详察之。”韩信犹豫不忍倍汉,又自以为功多,汉终不夺我齐,遂谢蒯通。蒯通说不听,已详狂为巫。</p>
</body>
</html>
css3 多列布局记的更多相关文章
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们 ...
- CSS3多列布局
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...
- css3 多列布局使用
css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- CSS自学笔记(15):CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- CSS3_多列布局
CSS3 多列布局 可以随屏幕大小自适应布局 能够创建多个列对文本进行布局 属性 column-count: 5; 将文本分成 5 列 注意: 用户的屏幕大小 column-fill: bala ...
- 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- [iOS 多线程 & 网络 - 2.6] - 使用POST上传JSON数据 & 多值参数
A.上传JSON 1.思路: 必须使用POST方法才能上传大量JSON数据 设置请求头:设置Content-Type 设置请求体,JSON实际相当于字典,可以用NSDictionary NSJSONS ...
- POJ 1088 滑雪 (记忆化搜索)
题目链接:http://poj.org/problem?id=1088 题意很好懂,就是让你求一个最长下降路线的长度. dp[i][j]记录的是i j这个位置的最优的长度,然后转移方程是dp[i][j ...
- 框架学习笔记:Unity3D的MVC框架——StrangeIoC
作为从AS3页游走过来的人,看见StrangeIoC会额外亲切,因为StrangeIoC的设计和RobotLegs几乎一致,作为一款依赖注入/控制反转(IoC)的MVC框架,StrangeIoC除了使 ...
- MS-SQL Server字符串处理函数大全
MS-SQL Server字符串处理函数大全 select语句中只能使用sql函数对字段进行操作(链接sql server), select 字段1 from 表1 where 字段1.Index ...
- vim 打开多个文件
一.如果在终端还没有打开vim 1.vim横向分屏打开多个文件 vim -o 文件1 文件2 2.vim纵向分屏打开多个文件 vim -O 文件1 文件2 二.如果在终端已经打开vim 1.横向分屏打 ...
- 解决Linux下sqlplus中文乱码问题
错误现象:在windows下用其他工具访问oracle,确认中文正常显示.在Linux下使用sqlplus查询数据表中文内容出现乱码. 分析及解决:因为windows下正常,所以问题应出现在Linux ...
- NAT的全然分析及其UDP穿透的全然解决方式
NAT的全然分析及其UDP穿透的全然解决方式 一:基本术语 防火墙 防火墙限制了私网与公网的通信,它主要是将(防火墙)觉得未经授权的的包丢弃,防火墙仅仅是检验包的数据,并不改动数据包中的IP地址和 ...
- cocos2dx 3.0 触摸机制
在cocos2dx 3.0版本号中,废弃了以往2.x版本号的写法,我们先来看一下Layer.h中的一段代码 /* Callback function should not be deprecated, ...
- [Redux] Accessing Dispatch and State with Redux -- connect
If you have props and actions, you want one component to access those props and actions, one solutio ...
- Swift3.0语法变化
写在前面 首先和大家分享一下学习新语法的技巧:用Xcode8打开自己的Swift2.3的项目,选择Edit->Convert->To Current Swift Syntax- 让Xcod ...