CSS3的新特性(2)
作者:kouyubo 来源:蓝色理想 发布时间:2009-03-23 17:46:00
标签:布局,设计,Gird,特性,css3
多栏
该特性使生活更加容易,呵呵。这个新特性允许网页设计师将文字填入栏中。这可以通过两种方法实现,定义各栏的宽度,或者是定义栏数。
多栏布局目前只支持Mozilla核心的浏览器和Safari 3, 它们支持各自的属性前缀 -moz-和-webkit-。下面的例子使用栏宽:
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
下一个例子使用栏数:
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
这两个例子输出如下:
还有一个特性尚未生效,它就是“column-space-distribution”,这个属性可以描述当页面中还有剩余空间时如何分配栏目之间的间距。
以上文章转自:http://www.qianduan.net/?p=755
关于CSS3 中的 Gird 布局
我们看看下面这张图:
图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说,如果使用 CSS3 Gird 布局的话,我们只需这样写:
body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }
其中,body 部分声明页面为 3 栏,栏间距为 0.5英寸;img 中 float 属性指明图片浮动位置为页面的右上角(CSS3 定位好强大 -__-),而宽度为 3 个栏宽。只需这样两行 CSS,我们就可以实现这个复杂的布局了。真的很神奇。
Gird 布局是好,不过如果你认为它很简单的话,你就大错特错了。看看 w3c 中关于它的介绍,你会发现理解它的意义不亚于看懂天书。好在还是个草案,但愿它到了正式版的时候,能够更加简单易用点。
Gird 布局应用很广泛,最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它(以及其它 CSS3 草案),那就酷毙了。不知道,最近异常低调的 IE8,会不会是这第一个吃螃蟹的人呢?


猜你喜欢
- 这样就将你所有微信好友的信息都返回了,我们并不需要这么多的信息,我们选取一些信息存储到 csv 文件中注意:返回的信息是一个 list,其中
- 前言学习一门新的语言肯定是要从他的基本语法开始,语法构成了整个程序设计的基础,从语法中我们也可以看到这门语言的一些特性,但是话说回来,语法这
- python条件语句使用 if 表达式,难度不高,需要注意的是嵌套用法,以及如何设置对应的条件。if 条件判断语句python 语句是按固定
- 本文实例讲述了Python基于Floyd算法求解最短路径距离问题。分享给大家供大家参考,具体如下:Floyd算法和Dijkstra算法,相信
- 作者:samisa 以下文中的翻译名称对照表 : payload: 交谈内容 object: 实例 function: 函数 使用 php来
- MySQL手册中find_in_set函数的语法解释:FIND_IN_SET(str,strlist)str 要查询的字符串 strlist
- 1.self只有在类的方法中才会有,其他函数或方法是不必带self的。2.在调用时不必传入相应的参数。3.在类的方法中(如__init__)
- pandas基于numpy,所以其中的空值nan和numpy.nan是等价的。numpy中的nan并不是空对象,其实际上是numpy.flo
- 动画效果如下:GIF看起来可能会有点卡wxml<view class="confirm bubble">确定
- 窗口背景主要包括,背景色与背景图片,设置窗口背景有三种方法使用QSS设置窗口背景使用QPalette设置窗口背景实现PainEvent,使用
- 摘要前面给大家分享了pandas做数据合并的两篇[pandas.merge]和[pandas.cancat]的用法。今天这篇主要讲的是pan
- 有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-mu
- 之前安装过Anaconda3,但是今天发现我安装的Anaconda Navigator不见了,然后看了网上的各种博客发现是自己安装Anaco
- Python 基础教程之包和类的用法建立一个文件夹filePackage 在filePackage 文件夹内创建 __init__.py 有
- 打印100-999之间的回文数(即百位和个位的数字相等),并每10个打印一行i = 100x = 0 # 使用计数器,每10个换行打印whi
- 代码如下#!/bin/python#coding=utf-8#python-version=2.75  
- 目录1.根据默认的行列索引操作1.1行删除1.2列删除2.根据自定义的行列索引操作2.1行删除2.2列删除本文介绍Pandas中DataFr
- throttle我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场
- 先来看段mysql查询文章回复语句:#查询文章回复-- ------------------------------ Procedure s
- 一起画图吧为什么突然想搞这个画图软件呢不瞒各位,是因为最近接到了一个很小很小很小小得不能再小的小项目就是基于Tkinter,做一个简易的画图