正常访问状态! 设为首页 | 加入收藏夹 | 浏览历史  
  http://www.guosp.com
 碧海澜涛居
  海纳百川,有容乃大。壁立千刃,无欲则刚!
 
 
关键词:
  网站首页 | 关于本站 | 技术资料 | 美文日志 | 读书收藏 | 影视收藏 | 软件收藏 | 摄影相册| 留言板 
  技术资料 >> 网页制作 关闭(快捷键alt+C)
搜索标签: 暂无标签
CSS display:table属性用法解析
[阅读次数:968次]  [发布时间:2012年3月31日]

CSS display:table属性

当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:CSS display:table、 CSS display:table-row和CSS display:table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。

使用CSS表格

CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,“CSS display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。

在深入了解这种方法之前,让我们先来写份HTML文档实例:

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtml
  4. lang="en-US">
  5. <head>
  6. ?HTMLheadcontent…
  7. </head>
  8. <body>
  9. <dividdivid="wrapper">
  10. <dividdivid="header"></div>
  11. <dividdivid="main">
  12. <dividdivid="nav">
  13. ?navigationcolumncontent…
  14. </div>
  15. <dividdivid="extras">
  16. ?newsheadlinescolumncontent…
  17. </div>
  18. <dividdivid="content">
  19. ?mainarticlecontent…
  20. </div>
  21. </div>
  22. </div>
  23. </body>
  24. </html>

这份HTML源代码满足了内容呈现方面的要求。先是导航栏,然后是附加栏,最后是内容栏。我们同样需要将以下CSS样式应用上去:

  1. #main{
  2. display:table;
  3. border-collapse:collapse;
  4. }
  5. #nav{
  6. display:table-cell;
  7. width:180px;
  8. background-color:#e7dbcd;
  9. }
  10. #extras{
  11. display:table-cell;
  12. width:180px;
  13. padding-left:10px;
  14. border-right:1pxdotted#d7ad7b;
  15. }
  16. #content{
  17. display:table-cell;
  18. width:380px;
  19. padding-left:10px;
  20. }

这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera(译者注:包括FF2/FF3/Google都通过了测试)中显示出来。下面这张图片是它在IE8中的样子:

我们轻松实现了三栏等高布局,而无需使用伪造背景图片之类的技巧,更不用担心定位和清除浮动的问题!





本页地址: [复制地址]
该页内容非本站原创 收藏自:http://developer.51cto.com/art/201009/226678.htm
返回顶部 关闭(快捷键alt+C)
评论统计(0条)| 我要评论
暂无评论内容!
我要评论 
我要评论: 带*部分需要填写
 姓名称呼: * 请填写您的姓名或呢称
联系方式: QQ,MSN,Email都可以,方便交流 (仅管理员可见)
 评论内容: * 不超过100字符,50汉字
验证码:
    
  推荐链接
·使用optgroup对select下拉菜...
·html页面表格导出到excel总...
·用DreamWeaver,做动态网页...
·常用的div ul li css样式 详...
·file表单元素怎样设置浏览按...
·CSS控制ul缩进间距和去掉li...
·用HTML 格式导出Excel 时,...
·定义表单的input上传文件ty...
·网页表格打印格式
·网站及服务器常见错误的原因...
  最近更新  
·Host 'XXX' is not allowed...
·Win2008或IIS7的文件上传大...
·IIS7.0上传文件限制的解决方...
·测试信息2015-03-11
·asp.net中处理图片
·ASP.NET之Web打印-终极解决...
·Asp.net下C#调用Word模版实...
·asp.net下将页面内容导入到...
·asp.net导出为pdf文件
·asp.net生成pdf文件
·FCKeditor 文本编辑器的使用...
·ASP.NET 将数据生成PDF
·asp.net2.0导出pdf文件完美...
·AspJpeg的安装与测试
·JS验证浏览器版本对IE11的支...
  热门浏览  
·IE8和IE9出现“此网页上的问...
·无线路由器密码破解,教你断...
·js替换所有回车换行符
·QQ/MSN在线交流代码
·IE弹出“中国工商银行防钓鱼...
·如何取消键盘上的一些快捷键...
·win7声音小的解决方法
·webdav漏洞的利用
·强制两端对齐的函数或者CSS...
·win7下成功安装sql server ...
·显示器分辨率调的过高导致电...
·天诺时空技术技术论坛
·js验证手机号码格式
·JS展开和收缩效果(二)
·本地计算机上的 MSSQLSERVE...
  碧海澜涛居
网站首页关于本站站长简介开发案例技术资料美文日志摄影相册读书收藏影视收藏留言板
版权所有:碧海澜涛 QQ:410436434 Email:shaopo_guo@163.com 苏ICP备15000526号
免责声明:本站为个人网站,站内所有文字、图片等各类资料均为个人兴趣爱好所收集,不用作任何商业用途,亦不保证资料的真实性,若有因浏览本站内容而导致的各类纠纷,本站也不承担任何责任。本站部分内容来自互联网,如有涉及到您的权益或隐私请联系站长解决。