代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title> three column layout </title>
7 <meta name="Generator" content="缔友计算机信息技术有限公司 ,2010" />
8 <meta name="Author" content="Geovin Du 涂聚文" />
9 <meta name="Keywords" content="缔友计算机信息技术有限公司 ,2010,Cascading, Style, Sheets, CSS1, CSS2, CSS" />
10 <meta name="Description" content="CSS ~ Cascading Style Sheets" />
11 <style type="text/css">
12
13 html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
14 #main
15 {
16 width:80%;
17 margin-left:auto;
18 margin-right:auto;
19 }
20 /* The header and footer */
21 .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
22
23 /* This bit does all the work */
24 #container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
25 #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
26 #left {float:left; position:relative; width:200px; left:0px;}
27 #right {float:right; position:relative; width:190px; right:0px;}
28 #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
29 .clear {clear:both;}
30
31 /* Just to extend each column */
32 #inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
33 #inner a span {display:none;}
34 #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
35 #inner a:active span, #inner a:focus span {display:block;}
36
37 a:visited, a {text-decoration:underline; cursor:pointer;}
38 a:hover {text-decoration:none; cursor:pointer;}
39
40 em {font-weight:bold;}
41 </style>
42 </head>
43
44 <body>
45 <div class="main" id="main">
46 <div class="headfoot">兼容各浏览器</div>
47
48 <div id="container">
49 <div id="inner">
50 <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>
51
52 <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
53
54 <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
55
56 <div class="clear"></div>
57 </div>
58
59
60 </div>
61 <div class="headfoot">勝利は仕事部屋である貴方にご光来を賜ることを歓迎<br />NOTHING could be simpler...!</div>
62 </div>
63 </body>
64
65 </html>
66
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
6 <title> three column layout </title>
7 <meta name="Generator" content="缔友计算机信息技术有限公司 ,2010" />
8 <meta name="Author" content="Geovin Du 涂聚文" />
9 <meta name="Keywords" content="缔友计算机信息技术有限公司 ,2010,Cascading, Style, Sheets, CSS1, CSS2, CSS" />
10 <meta name="Description" content="CSS ~ Cascading Style Sheets" />
11 <style type="text/css">
12
13 html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px;}
14 #main
15 {
16 width:80%;
17 margin-left:auto;
18 margin-right:auto;
19 }
20 /* The header and footer */
21 .headfoot {display:block; height:70px; background:#08a; color:#fff; text-align:center; padding:5px;font-size:30px;}
22
23 /* This bit does all the work */
24 #container {position:relative; display:block; background:#0ac; border-left:200px solid #aa8; border-right:200px solid #a8a;}
25 #inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px;}
26 #left {float:left; position:relative; width:200px; left:0px;}
27 #right {float:right; position:relative; width:190px; right:0px;}
28 #center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%;}
29 .clear {clear:both;}
30
31 /* Just to extend each column */
32 #inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
33 #inner a span {display:none;}
34 #inner a:active, #inner a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}
35 #inner a:active span, #inner a:focus span {display:block;}
36
37 a:visited, a {text-decoration:underline; cursor:pointer;}
38 a:hover {text-decoration:none; cursor:pointer;}
39
40 em {font-weight:bold;}
41 </style>
42 </head>
43
44 <body>
45 <div class="main" id="main">
46 <div class="headfoot">兼容各浏览器</div>
47
48 <div id="container">
49 <div id="inner">
50 <div id="left"><a href="#"><em>CLICK</em> here to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>
51
52 <div id="right"><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
53
54 <div id="center"><a href="#"><em>CLICK</em> here to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
55
56 <div class="clear"></div>
57 </div>
58
59
60 </div>
61 <div class="headfoot">勝利は仕事部屋である貴方にご光来を賜ることを歓迎<br />NOTHING could be simpler...!</div>
62 </div>
63 </body>
64
65 </html>
66