CSS three column layout
代码 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
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
2009-11-03 Reference List between HTTP_ACCEPT_LANGUAGE Servervariable value, Locale ID (LCID) and Language区域化设置