div仿框架布局之典型的两栏布局 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 <meta http-equiv="Content-Language" content="zh-cn" />
  7 <title>div仿框架布局之典型的两栏布局</title>
  8 <meta name="Description" content="摆脱frameset的束缚，以div代替，通过css实现仿框架布局" />
  9 <meta name="Keywords" content="div布局, div仿框架布局, 两栏布局" />
 10 <meta name="author" content="" />
 11 <style type="text/css">
 12 html,body{
 13 overflow:hidden;
 14 height:100%;
 15 margin:0;
 16 padding:0;
 17 font:14px/1.8 Georgia, Arial, Simsun;
 18 }
 19 html{
 20 _padding:110px 0;
 21 }
 22 #hd{
 23 position:absolute;
 24 top:0;
 25 left:0;
 26 width:100%;
 27 height:100px;
 28 background:#999;
 29 }
 30 #bd{
 31 position:absolute;
 32 top:110px;
 33 right:0;
 34 bottom:110px;
 35 left:0;
 36 overflow:hidden;
 37 width:100%;
 38 _height:100%;
 39 }
 40 #side{
 41 position:absolute;
 42 top:0;
 43 left:0;
 44 bottom:0;
 45 overflow:auto;
 46 width:200px;
 47 _height:100%;
 48 background:#666;
 49 }
 50 #main{
 51 position:absolute;
 52 _position:static;
 53 top:0;
 54 right:0;
 55 bottom:0;
 56 left:210px;
 57 overflow:auto;
 58 _overflow:hidden;
 59 _height:100%;
 60 _margin-left:210px;
 61 background:#666;
 62 }
 63 #content{
 64 _overflow:auto;
 65 _width:100%;
 66 _height:100%;
 67 }
 68 #ft{
 69 position:absolute;
 70 bottom:0;
 71 left:0;
 72 width:100%;
 73 height:100px;
 74 background:#999;
 75 }
 76 /* 与布局无关，一些说明性内容样式 */
 77 .tit-layout{margin:30px 0 0;font-size:18px;text-align:center;}
 78 .copyright{font-weight:bold;text-align:center;}
 79 #feature{width:200%;line-height:4;}
 80 #feature .hd{padding:20px 15px;}
 81 #feature .hd h2{margin:0;font-size:16px;}
 82 #feature .bd ol{margin-top:0;}
 83 #feature .bd h3{margin:0;padding:0 15px;font-size:14px;}
 84 #feature .ft{padding:10px 15px 30px;}
 85 </style>
 86 </head>
 87 <body>
 88 <div id="hd">
 89 <h1 class="tit-layout">div仿框架布局之典型的两栏布局Version2.0（Private）</h1>
 90 </div>
 91 <div id="bd">
 92 <div id="side">侧边栏</div>
 93 <div id="main">
 94 <div id="content">
 95 <div id="feature" class="feature">
 96 <div class="hd">
 97 <h2>div仿框架布局Version2.0的特征：</h2>
 98 <span>update: 2008.09.22</span>
 99 </div>
100 <div class="bd">
101 <h3>优点：</h3>
102 <ol>
103 <li>以div代替frameset，用css实现仿框架布局</li>
104 <li>在web标准模式Standard Mode下运行</li>
105 <li>兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试</li>
106 <li>内容栏区域可以允许出现宽为100%或超100%的元素，如：
107 <p>&lt;div class=&quot;main&quot;&gt;&lt;div style=&quot;width:100%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;</p>
108 <p>&lt;div class=&quot;main&quot;&gt;&lt;iframe style=&quot;width:100%;&quot;&gt;&lt;/iframe&gt;&lt;/div&gt;</p>
109 </li>
110 <li>适用于：后台；邮箱等地方</li>
111 </ol>
112 </div>
113 <div class="ft">
114 <a href="http://blog.doyoe.com/" title="去css探索之旅浏览更多div布局文章">More</a>
115 </div>
116 </div>
117 </div>
118 </div>
119 </div>
120 <div id="ft">
121 <address class="copyright">Copyright &copy; <a href="http://blog.doyoe.com/">doyoe.com</a></address>
122 </div>
123 </body>
124 </html>

 

posted @ 2013-05-02 15:08  Optimal New  阅读(363)  评论(0)  编辑  收藏  举报