首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

[散分]姗姗来迟的div仿框架布局解决思路

2012-02-19 
[散分]姗姗来迟的div仿框架布局转载请注明出处,css探索之旅-飘零雾雨的庄园  记得早在07年的时候就写过一

[散分]姗姗来迟的div仿框架布局
转载请注明出处,css探索之旅-飘零雾雨的庄园

  记得早在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

[解决办法]
ding
[解决办法]
pretty good.
[解决办法]
顶 学习了!!!
[解决办法]
学习
[解决办法]
学习,
不知道div能否像框架那样可以拉动边框
[解决办法]
学习
[解决办法]
好东西~顶着!
[解决办法]

[解决办法]
UP
[解决办法]
这个必须顶
[解决办法]
这个必须顶
[解决办法]
jf
[解决办法]
谢谢了,学习,不过我很菜,能说说这样用的好处吗?何时需要这样用。
[解决办法]
jf 并学习
[解决办法]
多谢楼主
[解决办法]
学习
[解决办法]
看看学习,楼主辛苦了
[解决办法]
半年前要找的东西。。现在终于找到了。。
mark一下。
此贴必火。
[解决办法]
顶下
[解决办法]
弱弱的问一下:
怎么实现左点右出?
[解决办法]
接分来了。
[解决办法]
工页
[解决办法]
支持原创,

还有,

抢分啊。。。。呵呵
[解决办法]
顶、学习、抢分
[解决办法]
jf,学习
[解决办法]
终于修正鸟,表忘了还有一个利用锚点实现的TabStrip你也给优化一下,等着用涅~~````` ^_^


[解决办法]
接分!
[解决办法]
学习
[解决办法]
学习,帮顶,接分!
[解决办法]
顶,学习,顺便接分。
[解决办法]

探讨
学习,帮顶,接分!

[解决办法]
很好
[解决办法]
~jF
[解决办法]
学习.
[解决办法]
mark
[解决办法]
学习学习
[解决办法]
每天回帖即可获得10分可用分!小技巧:教您如何更快获得可用分
[解决办法]
我喜欢这个。
[解决办法]
留个记号
[解决办法]
ding
[解决办法]
先学着,以后会用到的
[解决办法]
ding
[解决办法]
学习
[解决办法]
收藏了
[解决办法]

[解决办法]
先顶了再看
[解决办法]
不错
但是没有了frame的一些重要属性,比如window的特性,这个布局就和Table布局没多少区别了?
还是我没看明白?

[解决办法]
it is but I do't KNOK
[解决办法]
丁页,deyiending。
[解决办法]
..
[解决办法]
顶 学习了!!!
[解决办法]
hao a wo ai kan
[解决办法]
up..
[解决办法]
xue xi xia!!
[解决办法]
学习...
[解决办法]
为什么要仿呢。
[解决办法]
顶,没的说!!
[解决办法]
太厚重了,看不懂
[解决办法]

[解决办法]
学习了
------解决方案--------------------


很厉害!!
[解决办法]
好东西。收藏先,顺便接分。
[解决办法]
学习

[解决办法]
学习
[解决办法]

探讨
弱弱的问一下:
怎么实现左点右出?

[解决办法]
挺个!
[解决办法]
顶一下
[解决办法]
学习
[解决办法]
探讨


[解决办法]
学习一下。。。
[解决办法]
这个不顶是不行了,我现在正为这个问题发愁,多谢分享!
[解决办法]
标记一下 学习
[解决办法]
非常值得研究啊
[解决办法]
学习!jf
[解决办法]
顶!楼主好样的.
[解决办法]
谢谢楼主,学习了!
[解决办法]
路过的。。。。mark
[解决办法]
好好学习
[解决办法]
嗯 不错
[解决办法]
此帖必火啊
[解决办法]
学习了 3Q
[解决办法]
sf
[解决办法]

[解决办法]
学习 up
[解决办法]
up
[解决办法]
学习了
[解决办法]
学习了。
[解决办法]
嘿嘿。。。路过留下脚印。。。。
[解决办法]
顶,学习了
[解决办法]
学习一下。
[解决办法]

[解决办法]
不錯.支持樓主,順便接分..
[解决办法]
我要下载,不要搞的那么麻烦嘛
[解决办法]
学习啊
[解决办法]
学习学习
------解决方案--------------------


不明白你这样写有什么好处吗?
[解决办法]
学习一下
[解决办法]

热点排行