CSS实例:三列等高布局
来源:
互联网
日期:2006-4-21
三列等高CSS布局的一个实例, 修改国外的一个demo, 兼容到了IE5.5+ 和标准的浏览器Opera Firefox Safari。 不过hack太多,不是很喜欢这样做。
全部代码如下:
<?xml version="1.0" encoding="gb2312"?> <!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>3 column lauput</title> <style type="text/css" media="screen"> <!-- /*<![CDATA[*/ /*----------------------------------------------------------- @from:http://www.alistapart.com/articles/holygrail @modify:greengnn 08-01-02 ------------------------------------------------------------*/ * { margin:0; padding:0; } body { min-width: 550px; font:normal normal normal 75%/1.25em Verdana, Arial, Helvetica, sans-serif; color:#333333; text-align:left; } /*layout*/ #container { padding-left: 200px; padding-right: 150px; background:#000; zoom:1; } #container:after { content:'.'; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /*\*/ #container { display: block; } /*\*/ #center, #left, #right { position: relative; float: left; } *+html #center { } #center { width: 100%; } #left { width: 200px; right: 200px; margin-left: -100%; } #right { width: 150px; margin-right: -150px; } #footer { clear: both; } /*Equal-height */ #container { overflow: hidden; } #footer { overflow:hidden; position: relative; } /*IE7 hack*/ *+html #center { position:static; } *+html #left { position:static; } *+html #right { position:static; } *+html #container { position:relative; overflow:hidden; } *+html #left { position:relative; } /*End IE7 hack*/ /*Start Hack for Opera8*/ /*\*/ #container #center, #container #left, #container #right { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #container #center, #container #left, #container #right { padding-bottom: 0 !important; margin-bottom: 0 !important; } #center:before, #left:before, #right:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } /**/ /*End Hack for Opera8*/ /*just to see*/ #header, #footer { font-size:40px; line-height:40px; text-align:center; font-weight:bold; color:#cccccc; background:#666666; } #center { background:#eeeeee; } #left { background:#FF9933; } #right { background:#0099CC; } /*]]>*/ --> </style> </head> <body> <div id="header">header(test in IE5.5+ opera9.0 Firefox 2.0)</div> <div id="container"> <div id="center"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> <div id="left"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> <div id="right"> <h2>Abstract</h2> <p>The web is constantly evolving. New and innovative websites are being created every day, pushing the boundaries of HTML in every direction. HTML 4 has been around for nearly a decade now, and publishers seeking new techniques to provide enhanced functionality are being held back by the constraints of the language and browsers.</p> <p>To give authors more flexibility and interoperability, and enable more interactive and exciting websites and applications, HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics.</p> <p>Work on HTML 5, which commenced in 2004, is currently being carried out in a joint effort between the <a href="http://www.w3.org/html/"><abbr title="W3C HTML Working Group">W3C HTML WG</abbr></a> and the <a href="http://www.whatwg.org/"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>. Many key players are participating in the W3C effort including representatives from the four major browser vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organisations and individuals with many diverse interests and expertise.</p> <p>Note that <a href="http://www.w3.org/html/wg/html5/">the specification</a> is still a <em>work in progress</em> and quite a long way from completion. As such, it is possible that any feature discussed in this article may change in the future. This article is intended to provide a brief introduction to some of the major features as they are in the current draft.</p> </div> </div> <div id="footer">footer</div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> /*<![CDATA[*/ _uacct = "UA-496414-1"; /*]]>*/ </script> </body> </html>
查看运行效果:
更多的CSS实例:三列等高布局请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
互联网
日期: 2006-4-21
|
|
|