一项目中，设计设计的头部是通栏的，中间是定宽，两侧背景自适应的~ 一边是黑色块，一边是红色块，下面是还带边框的。 介种设计不多见。俺也是头一次遇到。咋实现呢？ 一开始用了一种笨方法。就是给html写了一个黑色背景图平铺。 然后再给body一个足够大的红色块背景图。 介样可以实现，但不是好方法。一是，图片太大。二是并不能确保大分辩率情况正常显示。 在标准群里问了下，京-奔波儿灞童鞋给了一种方法可行。但没那么简单，我测试下了，兼容性会有些问题，我做了下修改，做到了兼容，但用到了HACK，用了三层结构：
下面给出代码：
样式部分：
又跟跟京-奔波儿灞讨论了下。又做了下修改，样式如下：
此次改进，是因为定位元素会有占位，只是位置的移动，但占位还会存在，现代浏览器，不会撑出滚动条，但IE6 7会有。使用margin 不会出现占位的情况。
示意图如下：
下面给出实例：
提示：您可以先修改部分代码再运行
欢迎大家测试代码，如果有问题，请及时发评论告诉我，我立即更正，如果有哪位大虾有更好的办法，欢迎跟贴。
最后编辑： wxbwyx821 编辑于2010/01/13 18:22
下面给出代码：
样式部分：
又跟跟京-奔波儿灞讨论了下。又做了下修改，样式如下：
此次改进，是因为定位元素会有占位，只是位置的移动，但占位还会存在，现代浏览器，不会撑出滚动条，但IE6 7会有。使用margin 不会出现占位的情况。
示意图如下：
下面给出实例：
提示：您可以先修改部分代码再运行
欢迎大家测试代码，如果有问题，请及时发评论告诉我，我立即更正，如果有哪位大虾有更好的办法，欢迎跟贴。
| 最新日志 | 随机日志 | 综合排行 | |||
|---|---|---|---|---|---|
最后编辑： wxbwyx821 编辑于2010/01/13 18:22
FF英文长串断行问题
样式表里的@charse
北北
2010/07/06 11:42
看了没试过。收藏。学习。
wxbwyx821 回复于 2010/07/09 09:20
你早就该看了~~ 再回复一个试试，刚才貌似有问题
鱼 
2010/07/06 11:42
来传说一下
wxbwyx821 回复于 2010/07/06 11:48
多谢了~~ 鱼胸
修远兮
2010/07/06 11:40
正好遇到这样的问题，好好学习一下。
wxbwyx821 回复于 2010/07/06 11:47
哈哈~ 
5D开心博客
2010/03/20 20:30
试了下果然很强大啊。
分页： 1/1 
1 
1
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,left=50,top=50status=no,resizable=yes'));keyit.focus();){kind=link}