Html+CSS 构建 B/S结构软件界面 -- 布局篇 -- position方式

原文：http://bbs.blueidea.com/viewthread.php?tid=2818595

纯css布局结构很有意思
以下是一个示例代码:

1. <?xml  version="1.0"  encoding="UTF-8"?>
   
2. <!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
3. <html  xmlns="http://www.w3.org/1999/xhtml">
   
4. <head>
   
5. <meta  http-equiv="Content-Type"  content="text/html;  charset=utf-8"  />
   
6. <title>WiseInfo</title>
   
7. <style  type="text/css">
   
8. <!--
   
9. *  {
   
10.         margin:0px;
    
11.         padding:0px;
    
12. }
    
13. html,  body  {
    
14.         height:100%;
    
15.         overflow:  hidden;
    
16. }
    
17. html>body  {                /*--  for  !IE6.0  --*/
    
18.         width:  auto;
    
19.         height:  auto;
    
20.         position:  absolute;
    
21.         top:  0px;
    
22.         left:  0px;
    
23.         right:  0px;
    
24.         bottom:  0px;
    
25. }
    
26. body  {
    
27.         border:8px  solid  #ffffff;
    
28.         background-color:  #ffffff;
    
29. }
    
30. #mainDiv  {
    
31.         width:  100%;
    
32.         height:  100%;
    
33.         _padding-left:160px;
    
34. }
    
35. #rightDiv  {
    
36.         width:  100%;
    
37.         height:  100%;
    
38.         _padding:100px  0px;
    
39. }
    
40. #mainDiv>#rightDiv  {
    
41.         width:auto;
    
42.         position:absolute;
    
43.         left:160px;
    
44.         right:0px;
    
45. }
    
46. #leftDiv  {
    
47.         width:156px;
    
48.         height:100%;
    
49.         background-color:#99FF33;
    
50.         position:absolute;
    
51.         top:0px;
    
52.         left:0px;
    
53. }
    
54. #centerDiv  {
    
55.         width:  100%;
    
56.         height:  100%;
    
57.         background-color:#00CCFF;
    
58. }
    
59. #rightDiv>#centerDiv  {
    
60.         height:auto;
    
61.         position:absolute;
    
62.         top:100px;
    
63.         bottom:100px;
    
64. }
    
65. #topDiv{
    
66.         height:96px;
    
67.         width:100%;
    
68.         background-color:#9933FF;
    
69.         position:absolute;
    
70.         top:0px;
    
71. }
    
72. #bottomDiv{
    
73.         height:96px;
    
74.         width:100%;
    
75.         background-color:#FF9900;
    
76.         position:absolute;
    
77.         bottom:0px;
    
78.         _bottom:-1px;        /*--  for  IE6.0  --*/
    
79. }
    
80. -->
    
81. </style>
    
82. </head>
    
83. <body>
    
84. <div  id="mainDiv">
    
85.         <div  id="leftDiv"></div>
    
86.         <div  id="rightDiv">
    
87.                 <div  id="topDiv"></div>
    
88.                 <div  id="centerDiv"></div>
    
89.                 <div  id="bottomDiv"></div>
    
90.         </div>
    
91. </div>
    
92. </body>
    
93. </html>

复制代码