一个CSS上中下三行三列结构的Div布局

[html]  view plain copy print ?
  1. <!DOCTYPE  html  PUBLIC  "-//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";><html  xmlns="http://www.w3.org/1999/xhtml";  lang="gb2312">   
  2. <head>   
  3. <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312"  />   
  4. <title>上中下三行三列结构的Div布局</title>   
  5. <style>  
  6. body{text-align:center;margin:0;padding:0}  
  7. div   
  8. {   
  9.                 height:200px;   
  10. }   
  11. .title   
  12. {   
  13.                 margin:0  auto;   
  14.                 width:776px;   
  15.                 background-color:#abcdef;   
  16. }   
  17. .middle   
  18. {   
  19.                 margin:0  auto;   
  20.                 width:776px;   
  21. }   
  22. .left   
  23. {   
  24.                 float:left;   
  25.                 clear:right;   
  26.                 width:20%;   
  27.                 background-color:#eeefff;   
  28. }   
  29. .center   
  30. {   
  31.                 float:left;   
  32.                 clear:right;   
  33.                 width:50%;   
  34.                 background-color:#CCC000;   
  35. }   
  36. .right   
  37. {   
  38.                    
  39.                 float:left;   
  40.                 clear:right;   
  41.                 width:30%;   
  42.                 background-color:#fff000;   
  43. }   
  44. .both   
  45. {   
  46.                 clear:both;     
  47.                 width:100%;   
  48.                 background-color:#666999;     
  49. }   
  50. .footer   
  51. {                   
  52.                 margin:0  auto;   
  53.                 width:776px;   
  54.                 clear:both;     
  55.                 background-color:#000fff;     
  56. }   
  57. </style>   
  58. </head>   
  59. <body>   
  60. <div  class="title">顶部</div>   
  61. <div  class="middle">   
  62.                 <div  class="left">左侧</div>   
  63.                 <div  class="center">中部</div>   
  64.                 <div  class="right">右侧</div>   
  65.                 <div  class="both">全行</div>   
  66.                 <div  class="left">左侧</div>   
  67.                 <div  class="center">中部</div>   
  68.                 <div  class="right">右侧</div>   
  69.                 <div  class="both">全行</div>   
  70.                 <div  class="left">左侧</div>   
  71.                 <div  class="center">中侧</div>   
  72.                 <div  class="right">右侧</div>   
  73. </div>   
  74. <div  class="footer">底部</div>   
  75. </body>   
  76. </html>  

你可能感兴趣的:(一个CSS上中下三行三列结构的Div布局)