代码改变世界

渐进增强式布局

2009-03-02 14:47  一醉而过  阅读(456)  评论(0)  编辑  收藏  举报

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0042)http://lifesinger.org/lab/grids_test3.html -->
<HTML><HEAD><TITLE>Grids Layout Demo</TITLE>
<META http-equiv=content-type content="text/html; charset=utf-8"><LINK
media=screen href="Grids%20Layout%20Demo_files/reset-grids.css" type=text/css
rel=stylesheet>
<STYLE type=text/css>BODY {
 FONT: 12px/1.5 Tahoma, sans-serif; COLOR: #333
}
#header {
 MARGIN: 20px 0px 10px; TEXT-ALIGN: center
}
H1 {
 FONT: 22px Georgia, serif
}
H2 {
 MARGIN-BOTTOM: 5px; FONT: 14px 'Courier New', monospace
}
A {
 TEXT-DECORATION: none; outline: none
}
A:visited {
 COLOR: blue
}
.grid-c {
 BACKGROUND: #f3f3f3
}
.grid-c2-s4 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s4f {
 BACKGROUND: #f3f3f3
}
.grid-c2 {
 BACKGROUND: #f3f3f3
}
.grid-c2f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s6 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s6f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s7 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s7f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s8 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s8f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s9 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s9f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s10 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s10f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s11 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s11f {
 BACKGROUND: #f3f3f3
}
.grid-c2-s12 {
 BACKGROUND: #f3f3f3
}
.grid-c2-s12f {
 BACKGROUND: #f3f3f3
}
.grid-c3 {
 BACKGROUND: #f3f3f3
}
.grid-c3f {
 BACKGROUND: #f3f3f3
}
.grid-c3e {
 BACKGROUND: #f3f3f3
}
.grid-c3d {
 BACKGROUND: #f3f3f3
}
.grid-c3c {
 BACKGROUND: #f3f3f3
}
.grid-c3b {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7 {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7f {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7e {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7d {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7c {
 BACKGROUND: #f3f3f3
}
.grid-c3-s5e7b {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6 {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6f {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6e {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6d {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6c {
 BACKGROUND: #f3f3f3
}
.grid-c3-s9e6b {
 BACKGROUND: #f3f3f3
}
.grid-c3-s8e8 {
 BACKGROUND: #f3f3f3
}
.col-sub {
 BACKGROUND: #dbedf6
}
.col-extra {
 BACKGROUND: #eafbea
}
.test-box {
 BORDER-RIGHT: #aaa 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #aaa 1px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #aaa 1px dashed; PADDING-TOP: 10px; BORDER-BOTTOM: #aaa 1px dashed; HEIGHT: 90px
}
.test-box-big {
 BORDER-RIGHT: #aaa 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #aaa 1px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #aaa 1px dashed; PADDING-TOP: 10px; BORDER-BOTTOM: #aaa 1px dashed; HEIGHT: 90px
}
.test-box-small {
 BORDER-RIGHT: #aaa 1px dashed; PADDING-RIGHT: 10px; BORDER-TOP: #aaa 1px dashed; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #aaa 1px dashed; PADDING-TOP: 10px; BORDER-BOTTOM: #aaa 1px dashed; HEIGHT: 90px
}
.width {
 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; FONT-FAMILY: 'Courier New', monospace
}
#header UL {
 FLOAT: right
}
#header LI {
 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#content {
 CLEAR: both
}
#footer {
 MARGIN-BOTTOM: 20px
}
#footer .top {
 PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FLOAT: right; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
#page {
 POSITION: relative
}
#page2 {
 POSITION: relative
}
#page2 .col-main .width {
 DISPLAY: none
}
</STYLE>

<SCRIPT type=text/javascript>
 window.onload = function() {
  var trigger = document.getElementById('togglePageId');
  trigger.onclick = function() {
   var page = document.getElementById('header').parentNode;
   page.id = (page.id == 'page') ? 'page2' : 'page';
   return false;
  }
 };
</SCRIPT>

<META content="MSHTML 6.00.6000.16762" name=GENERATOR></HEAD>
<BODY>
<DIV id=page>
<DIV id=header>
<H1>Grids Layout Demo</H1>
<UL>
  <LI><A href="http://lifesinger.org/lab/grids_test1.html">常用布局</A> </LI>
  <LI><A href="http://lifesinger.org/lab/grids_test2.html">两栏布局</A> </LI>
  <LI>三栏布局 </LI>
  <LI><A id=togglePageId hideFocus
  href="http://lifesinger.org/lab/grids_test3.html#">自适应宽度</A> </LI></UL></DIV>
<DIV id=content><!-- 三栏：sub : main : extra -->
<H2>三栏：.grid-c3</H2>
<DIV class=grid-c3>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : main : sub -->
<H2>三栏：.grid-c3f</H2>
<DIV class=grid-c3f>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：main : sub : extra -->
<H2>三栏：.grid-c3e</H2>
<DIV class=grid-c3e>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：main : extra : sub -->
<H2>三栏：.grid-c3d</H2>
<DIV class=grid-c3d>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : extra : main -->
<H2>三栏：.grid-c3c</H2>
<DIV class=grid-c3c>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : sub : main -->
<H2>三栏：.grid-c3b</H2>
<DIV class=grid-c3b>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>510px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : main : extra -->
<H2>三栏：.grid-c3-s5e7</H2>
<DIV class=grid-c3-s5e7>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : main : sub -->
<H2>三栏：.grid-c3-s5e7f</H2>
<DIV class=grid-c3-s5e7f>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：main : sub : extra -->
<H2>三栏：.grid-c3-s5e7e</H2>
<DIV class=grid-c3-s5e7e>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：main : extra : sub -->
<H2>三栏：.grid-c3-s5e7d</H2>
<DIV class=grid-c3-s5e7d>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : extra : main -->
<H2>三栏：.grid-c3-s5e7c</H2>
<DIV class=grid-c3-s5e7c>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : sub : main -->
<H2>三栏：.grid-c3-s5e7b</H2>
<DIV class=grid-c3-s5e7b>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>470px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>190px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>270px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : main : extra -->
<H2>三栏：.grid-c3-s9e6</H2>
<DIV class=grid-c3-s9e6>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : main : sub -->
<H2>三栏：.grid-c3-s9e6f</H2>
<DIV class=grid-c3-s9e6f>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：main : sub : extra -->
<H2>三栏：.grid-c3-s9e6e</H2>
<DIV class=grid-c3-s9e6e>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：main : extra : sub -->
<H2>三栏：.grid-c3-s9e6d</H2>
<DIV class=grid-c3-s9e6d>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : extra : main -->
<H2>三栏：.grid-c3-s9e6c</H2>
<DIV class=grid-c3-s9e6c>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：extra : sub : main -->
<H2>三栏：.grid-c3-s9e6b</H2>
<DIV class=grid-c3-s9e6b>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>350px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>350px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>230px</SPAN></DIV></DIV></DIV><!-- 三栏：sub : main : extra -->
<H2>三栏：.grid-c3-s8e8</H2>
<DIV class=grid-c3-s8e8>
<DIV class=col-main>
<DIV class=main-wrap>
<DIV class=test-box>main<SPAN class=width>310px</SPAN></DIV></DIV></DIV>
<DIV class=col-sub>
<DIV class=test-box-big>sub<SPAN class=width>310px</SPAN></DIV></DIV>
<DIV class=col-extra>
<DIV class=test-box-small>extra<SPAN class=width>310px</SPAN></DIV></DIV></DIV>
<H2>对照图</H2>
<P><IMG src="Grids%20Layout%20Demo_files/grids_3col.gif"></P></DIV>
<DIV id=footer><A class=top
href="http://lifesinger.org/lab/grids_test3.html#hd">返回页首</A>
</DIV></DIV></BODY></HTML>