兼容并受

我最喜欢的电影镜头，没有之一

这是石破天惊里面的，肖恩康奈利从转动的巨大的还带着喷火的齿轮下面不可思议的进入监狱内部，整个特种小队都惊呆了，正当大家以为他借机逃跑的时候，阅读全文…

2008年12月19日23:30

table
使该元素按table样式渲染
table-row
使该元素按tr样式渲染
table-cell
使该元素按td样式渲染
table-row-group
使该元素按tbody样式渲染
table-header-group
使该元素按thead样式渲染
table-footer-group
使该元素按tfoot样式渲染
table-caption
使该元素按caption样式渲染
table-column
使该元素按col样式渲染
table-column-group
使该元素按colgroup样式渲染

2008年12月19日22:57

分类: web标准化

标签: css, display, display:table, talbe

442 views | 没有评论

三行，中间高度自适应，div+css布局代码

这个问题曾经纠缠我很长时间，前几天看到了display:table的用法，一下就想起来这个解决问题啦！
深夜写出来，嗯，很有成就感啊！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>三行，中间自适应，css+div布局</title> <style> *{ margin:0 ; padding:0} html, body, #box{ height:100%;} #box{ width:90%; margin:0 auto; display: table; position:relative} #box > div{ display:table-row} #header, #bottom{ width:100%; height:40px; background:#ccc; font:bold 12px/40px arial} #main{ height:100%; display:table-row; width:100%; background:#f2f2f2; } #main #text{ display:table-cell; vertical-align:top} #text_div{ text-align:center; } </style>  </head> <body> <div id="box"> <div id="header">header</div> <div id="main"> <div id="text"><div id="text_div">adfadsfadsf</div></div> </div> <div id="bottom">bottom</div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

2008年12月19日22:54

分类: web标准化

标签: web标准化, 三行式布局，自适应，高度

514 views | 没有评论

js控制元素的隐藏与显示，兼容firefox ie

这是一段使用js来控制页面元素的隐藏与显示的代码。

在firefox与ie7里面测试通过。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js控制元素的隐藏于现实，兼容firefox ie</title> <script> function toggle(el){ if(typeof(el)=="string"){el=document.getElementById(el);} if(el.style.display!=""){el.style.display="";return} if(el.style.display!="none"){el.style.display="none";return} } </script> </head> <body> <button onclick="toggle('name')">button1</button> <hr /> <input type=text name=xm id="name" /> <hr /> <button onclick="toggle('2')">button2</button> <hr /> <input type=text name=xx id="2" /> </body> </html>

提示：你可以先修改部分代码再运行。

2008年12月19日22:51

分类: web标准化

标签: firefox, ie7, js, 兼容，隐藏, 显示

1,023 views | 没有评论

兼容并受

我最喜欢的电影镜头，没有之一

display 属性，可以把div按照表格样式做出来

三行，中间高度自适应，div+css布局代码

js控制元素的隐藏与显示，兼容firefox ie

分类目录

最近文章

一堆标签

链接

Bookmarks