JS+CSS实现左中右3栏布局先显示中栏内容
浏览器执行HTML代码是逐行解析的，也就是说写在前面的HTML代码必然是先于后面的先在浏览器呈现出界面。而在常规的左中右三栏布局中，一般编写次序都是“左-中-右”或者是“右-中-左”。如何才能打破常规，实现“中-左右/右左”的布局呢？因为在网页中，一般中间模块都是放置主体的内容，先显示用户所关注的内容实体，再显示辅助的菜单的做法，未尝不是一种提高用户体验的措施。以下方法就是通过JS+CSS布局来实现这种效果。思路的关键两点：CSS让内容层“xzw_content”实现浮动定位；JS调整'xzw_left','xzw_content','xzw_right'三个层的高度达到一致。（写给自己看的片儿文...）
演示源码：
1 <!DOCTYPE html PUBLIC "-//W。3C//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" lang="utf-8">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta http-equiv="Content-Language" content="utf-8" />
6 <meta content="all" name="robots" />
7 <meta name="author" content="" />
8 <title>JS+CSS实现左中右3栏布局先显示中栏内容</title>
9 </head>
10 <style>
11 #xzw_main {
12 padding:0 150px
13 }
14 #xzw_content {
15 position:absolute;
16 background:#339;
17 width:400px;
18 margin:0 auto;
19 }
20 #xzw_left {
21 float:left;
22 background:#309;
23 width:140px;
24 height:30px
25 }
26 #xzw_right {
27 float:right;
28 background:#09C;
29 width:140px
30 }
31 #xzw_all {
32 width:700px;
33 margin:0 auto;
34 color: #000;
35 background:#0FF;
36 font-size:12px;
37 color:#fff
38 }
39 #xzw_footer {
40 clear:both;
41 background:#808080;
42 color:#fff
43 }
44 </style>
45 <body>
46 <div id="xzw_all">
47 <div id="xzw_main">
48 <div id="xzw_content">
49 <h2>主体内容模块</h2>
50 <p>在构建更高级的 ActionScript 应用程序时，您可能会发现需要了解有关用户操作系统的详细信息（和访问操作系统功能）。客户端系统环境是 flash.system 包中的类集合，可通过这些类来访问系统级功能，例如：</p>
51 <ul>
52 <li>确定执行 SWF 时所在的应用程序和安全域</li>
53 <li>确定用户的 Flash Player 的功能，如屏幕大小（分辨率）；以及确定某项功能是否可用，如 mp3 音频
54 <li>使用 IME 建立多语言站点</li>
55 <li>与 Flash Player 的容器（可能是 HTML 页或容器应用程序）进行交互</li>
56 <li>将信息保存到用户的剪贴板中</li>
57 </ul>
58 <p>flash.system 包还包括 IMEConversionMode 和 SecurityPanel 类。这两个类分别包含与 IME 和 Security 类一起使用的静态常数。</p>
59 </div>
60 </div>
61 <div id="xzw_left">左栏菜单栏</div>
62 <div id="xzw_right">右栏菜单栏</div>
63 <div id="xzw_footer">版权信息</div>
64 </div>
65 </body>
66 </html>
2 <html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta http-equiv="Content-Language" content="utf-8" />
6 <meta content="all" name="robots" />
7 <meta name="author" content="" />
8 <title>JS+CSS实现左中右3栏布局先显示中栏内容</title>
9 </head>
10 <style>
11 #xzw_main {
12 padding:0 150px
13 }
14 #xzw_content {
15 position:absolute;
16 background:#339;
17 width:400px;
18 margin:0 auto;
19 }
20 #xzw_left {
21 float:left;
22 background:#309;
23 width:140px;
24 height:30px
25 }
26 #xzw_right {
27 float:right;
28 background:#09C;
29 width:140px
30 }
31 #xzw_all {
32 width:700px;
33 margin:0 auto;
34 color: #000;
35 background:#0FF;
36 font-size:12px;
37 color:#fff
38 }
39 #xzw_footer {
40 clear:both;
41 background:#808080;
42 color:#fff
43 }
44 </style>
45 <body>
46 <div id="xzw_all">
47 <div id="xzw_main">
48 <div id="xzw_content">
49 <h2>主体内容模块</h2>
50 <p>在构建更高级的 ActionScript 应用程序时，您可能会发现需要了解有关用户操作系统的详细信息（和访问操作系统功能）。客户端系统环境是 flash.system 包中的类集合，可通过这些类来访问系统级功能，例如：</p>
51 <ul>
52 <li>确定执行 SWF 时所在的应用程序和安全域</li>
53 <li>确定用户的 Flash Player 的功能，如屏幕大小（分辨率）；以及确定某项功能是否可用，如 mp3 音频
54 <li>使用 IME 建立多语言站点</li>
55 <li>与 Flash Player 的容器（可能是 HTML 页或容器应用程序）进行交互</li>
56 <li>将信息保存到用户的剪贴板中</li>
57 </ul>
58 <p>flash.system 包还包括 IMEConversionMode 和 SecurityPanel 类。这两个类分别包含与 IME 和 Security 类一起使用的静态常数。</p>
59 </div>
60 </div>
61 <div id="xzw_left">左栏菜单栏</div>
62 <div id="xzw_right">右栏菜单栏</div>
63 <div id="xzw_footer">版权信息</div>
64 </div>
65 </body>
66 </html>
演示效果：
主体内容模块
在构建更高级的 ActionScript 应用程序时，您可能会发现需要了解有关用户操作系统的详细信息（和访问操作系统功能）。客户端系统环境是 flash.system 包中的类集合，可通过这些类来访问系统级功能，例如：
- 确定执行 SWF 时所在的应用程序和安全域
- 确定用户的 Flash Player 的功能，如屏幕大小（分辨率）；以及确定某项功能是否可用，如 mp3 音频
- 使用 IME 建立多语言站点
- 与 Flash Player 的容器（可能是 HTML 页或容器应用程序）进行交互
- 将信息保存到用户的剪贴板中
flash.system 包还包括 IMEConversionMode 和 SecurityPanel 类。这两个类分别包含与 IME 和 Security 类一起使用的静态常数。
左栏菜单栏
右栏菜单栏
