教你的X也可以宽度自适应---兼容IE系列及firefox

csharpfans · 发表于 2010-6-13 00:38:46

本帖最后由 csharpfans 于 2010-6-15 09:26 编辑

前些天见有人问这样的问题，于是自己没事就捣鼓了下。

没想到X的CSS样式表写的很好，架构很清晰，类重用性很高，
让我很快就把自己的网站改成宽度自适应了。

我主要改了common.css和module.css这两个文件，不是添加了很多东西，只是把几个类的宽度改成了百分比的形式。
如果你也有此想法，但愿下面的一些代码会对你有帮助。。

请看我做好的网站 中国编程社区

common.css

.wp { margin: 0 auto; min-width:970px; width: 90%; }

#ct { border: 1px solid {WRAPBORDERCOLOR}; background: {WRAPBG} url({IMGDIR}/vline.png) repeat-y 66.7% 0; }

.n {background: {WRAPBG} url({IMGDIR}/vline.png) repeat-y 80% 0 !important; }
.n .mn { width: 80%; }
.n .sd { width: 19%;min-width:170px; }
.mn { float: left; width: 66.6%;min-width:644px; margin-bottom: 1em; overflow: hidden; }
.sd { float: right;width: 33.3%;min-width:323px; overflow: hidden; _overflow-y: visible; }

module.css

#fh { width: 100%; }

.n { background-position: 80.1% 0 !important; }
.n .mn { width: 80%; }
.n .bm, .n .bn { padding: 10px; }
.n .sd { width: 19%;min-width:170px;}

yiy66 · 发表于 2010-6-13 00:43:25

顶你，感谢你的分享！！

zzyxz · 发表于 2010-6-13 00:44:22

我自己再看看

csharpfans · 发表于 2010-6-13 00:45:32

自己先顶顶，，希望更多的人知道。。

yiy66 · 发表于 2010-6-13 00:51:22

我再顶！！楼主你好！！

yiy66 · 发表于 2010-6-13 01:05:46

根据楼主的方法，已经成功了，
页面自动适应屏幕大小，太好了。

yiy66 · 发表于 2010-6-13 01:06:22

yxfwz · 发表于 2010-6-13 01:12:15

支持两下

csharpfans · 发表于 2010-6-13 01:13:32

回复 yiy66 的帖子

恭喜啊。。。有些地方我可能没有考虑到，比如群组的。。大家继续完善。。

台灣玩透透 · 发表于 2010-6-13 01:15:29

差別在哪給个說明吧

		自动登录	找回密码
密码			立即注册

教你的X也可以宽度自适应---兼容IE系列及firefox

评分