div仿框架布局之典型的两栏布局进化V2
来源：互联网 发布：js日期格式化函数 编辑：程序博客网 时间：2024/05/20 18:15
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><title>div仿框架布局之典型的两栏布局Version2.0（Private） - Powered by 飘零雾雨</title><meta name="Description" content="摆脱frameset的束缚，以div代替，通过css实现仿框架布局" /><meta name="Keywords" content="div布局, div仿框架布局, 两栏布局" /><meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" /><style type="text/css">html,body{overflow:hidden;height:100%;margin:0;padding:0;font:14px/1.8 Georgia, Arial, Simsun;}html{_padding:110px 0;}#hd{position:absolute;top:0;left:0;width:100%;height:100px;background:#999;}#bd{position:absolute;top:110px;right:0;bottom:110px;left:0;overflow:hidden;width:100%;_height:100%;}#side{position:absolute;top:0;left:0;bottom:0;overflow:auto;width:200px;_height:100%;background:#666;}#main{position:absolute;_position:static;top:0;right:0;bottom:0;left:210px;overflow:auto;_overflow:hidden;_height:100%;_margin-left:210px;background:#666;}#content{_overflow:auto;_width:100%;_height:100%;}#ft{position:absolute;bottom:0;left:0;width:100%;height:100px;background:#999;}/* 与布局无关，一些说明性内容样式 */.tit-layout{margin:30px 0 0;font-size:18px;text-align:center;}.copyright{font-weight:bold;text-align:center;}#feature{width:200%;line-height:4;}#feature .hd{padding:20px 15px;}#feature .hd h2{margin:0;font-size:16px;}#feature .bd ol{margin-top:0;}#feature .bd h3{margin:0;padding:0 15px;font-size:14px;}#feature .ft{padding:10px 15px 30px;}</style></head><body><div id="hd"><h1 class="tit-layout">div仿框架布局之典型的两栏布局Version2.0（Private）</h1></div><div id="bd"><div id="side">侧边栏</div><div id="main"><div id="content"><div id="feature" class="feature"><div class="hd"><h2>div仿框架布局Version2.0的特征：</h2><span>update: 2008.09.22</span></div><div class="bd"><h3>优点：</h3><ol><li>以div代替frameset，用css实现仿框架布局</li><li>在web标准模式Standard Mode下运行</li><li>兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器，没被列入的浏览器未测试</li><li>内容栏区域可以允许出现宽为100%或超100%的元素，如：<p><div class="main"><div style="width:100%;"></div></div></p><p><div class="main"><iframe style="width:100%;"></iframe></div></p></li><li>适用于：后台；邮箱等地方</li></ol></div><div class="ft"><a href="http://blog.doyoe.com/" title="去css探索之旅浏览更多div布局文章">More</a></div></div></div></div></div><div id="ft"><address class="copyright">Copyright © <a href="http://blog.doyoe.com/">doyoe.com</a></address></div><!--Google Analytics--><script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-3500471-2");pageTracker._trackPageview();} catch(err) {}</script></body></html>
