CSS3教程(6):创建网站多列


Posted in HTML / CSS onApril 02, 2009

使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。
使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。
上一篇文章:CSS3教程(5):网页背景图片
与多背景图片一样,CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法,请在下面的评论中提交你的链接,我很高兴能确认这种方法能用于很多中布局中。
跨浏览器兼容性:
比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome,这样我们就需要使用-moz和-webkit前缀了。 CSS3多列(宽度)
CSS3教程(6):创建网站多列
上面的截图是使用了下面的CSS3样式的效果:
#multiColumnWidth { text-align: justify; -moz-column-width: 20em; -moz-column-gap: 2em; -webkit-column-width: 20em; -webkit-column-gap: 2em; }
浏览器支持:

  • Firefox(3.05 …)
  • Google Chrome(1.0.154 …)
  • Google Chrome(2.0.156 …)
  • Internet Explorer(IE7, IE8 RC1 )
  • Opera(9.6 …)
  • Safari(3.2.1 windows…) CSS3多列(列数)
    CSS3教程(6):创建网站多列
    上面的截图是使用了下面的CSS3样式的效果:
    #multiColumnCount { text-align: justify; -moz-column-count: 3; -moz-column-gap: 1.5em; -moz-column-rule: 1px solid #dedede; -webkit-column-count: 3; -webkit-column-gap: 1.5em; -webkit-column-rule: 1px solid #dedede; }
    浏览器支持:
    • Firefox(3.05 …)
    • Google Chrome(1.0.154 …)
    • Google Chrome(2.0.156 …)
    • Internet Explorer(IE7, IE8 RC1 )
    • Opera(9.6 …)
    • Safari(3.2.1 windows…)
HTML / CSS 相关文章推荐
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 #HTML / CSS
CSS3的新特性介绍
Oct 31 #HTML / CSS
CSS3属性选择符介绍
Oct 17 #HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 #HTML / CSS
You might like
php获取mysql版本的几种方法小结
2008/03/25 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
Javascript的&&和||的另类用法
2014/07/23 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python 调用Java实例详解
2017/06/02 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python中几种自动微分库解析
2019/08/29 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
指导教师评语
2014/04/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python