？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" / title3 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" h2Abstract/h2 pThe 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 pTo 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 pWork 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 pNote that a href="http://www.w3.org/html/wg/html5/"the specification/a is still a emwork 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" h2Abstract/h2 pThe 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 pTo 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 pWork 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 pNote that a href="http://www.w3.org/html/wg/html5/"the specification/a is still a emwork 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" h2Abstract/h2 pThe 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 pTo 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 pWork 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 pNote that a href="http://www.w3.org/html/wg/html5/"the specification/a is still a emwork 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制作网页的实例，利用CSS相对定位进行多行多列布局。 !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无标题文档/title styl...
