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 >

演示效果：

主体内容模块

在构建更高级的 ActionScript 应用程序时，您可能会发现需要了解有关用户操作系统的详细信息（和访问操作系统功能）。客户端系统环境是 flash.system 包中的类集合，可通过这些类来访问系统级功能，例如：

• 确定执行 SWF 时所在的应用程序和安全域
• 确定用户的 Flash Player 的功能，如屏幕大小（分辨率）；以及确定某项功能是否可用，如 mp3 音频
• 使用 IME 建立多语言站点
• 与 Flash Player 的容器（可能是 HTML 页或容器应用程序）进行交互
• 将信息保存到用户的剪贴板中

flash.system 包还包括 IMEConversionMode 和 SecurityPanel 类。这两个类分别包含与 IME 和 Security 类一起使用的静态常数。

左栏菜单栏

右栏菜单栏

版权信息