div仿框架布局

记得早在07年的时候就写过一篇关于用div代替frameset,使用css来模仿框架布局的文章“DIV布局之头尾固定中间自适应”。


  不过在那篇文章中尚有一个未解决的遗憾问题,那就是为了兼容ie6,需使用Quirks Mode模式,虽说效果可以达到,但多少还是让人耿耿于怀,非得fix不可。在写完那篇文章过了很长时间后,估计在08年左右,偶然发现一个可以解决该问题的方法。于是就对之前的demo进行改造,优化。


  其实实际应用的地方不会很多,所以就没有发出来,一直处于Private状态 ^_^ 这段时间公司有个项目需要用到这个框架,被同事问起,就发了link给到。索性写篇文章,公布link,当是更新blog了,于是有了今天这篇“姗姗来迟的div仿框架布局”。该版本不再兼容IE低版本,如IE5.5及以下,兼容IE6,7,8; Firefox; Chrome; Safari; Opera浏览器,没被列入的浏览器未测试。


  主要有几个需要注意的地方是:


  1.如何去掉Quirks Mode:善加利用html标记


  2.两栏布局时需考虑内容栏里的内容灰常长的情况,如:超过内容栏本身宽度


  对于想看具体实现代码的朋友,就请自己去打开实例,另存到本地。这里我就不贴出来了,免得又臭又长,影响文章版面的美观 ^_^


  Version2.0进化细节:


   div仿框架布局之典型的通栏布局V2 
   div仿框架布局之典型的两栏布局V2 
   div仿框架布局之典型的两栏布局进化V2 


  回顾Version1.0进化细节:


   div仿框架布局之典型的通栏布局V1 
   div仿框架布局之典型的两栏布局V1 
   div仿框架布局之典型的两栏布局进化V1 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值