« 几个传统矢量背景 家乡的童谣 »

关于PJBLOG自适应皮肤~

2005-12-22 16:55:24 by 番茄红了 鸡零狗碎

看了不少的宽皮肤，却没有能完全做到自适应，就个人制作自适应皮肤的经验谈谈吧。

　　在PJBLOG的结构中， #sidebar 和 #mainContent 必须使用浮动属性（float），在通常的CSS中定位中我们使用像素（px）来固定宽度，在制作自适应的皮肤时则应该使用百分比（%）来固定。

　　看过以前的部分皮肤，用到了如下的方式：
[code]#sidebar{float:left;width:220px;}
#mainContent{float:right;margin:0px 0px 0px -220px;}
#innermainContent{margin:0px 0px 0px 220px;}[/code]
　　申明一下，这样做是多余的，CSS写成如下就可以了（设#Tbody宽度为760px）：
[code]#sidebar{float:left;width:220px;overflow:hidden}
#mainContent{float:right;width:540px;overflow:hidden}[/code]
　　这里，540px可能需要更改，这种情况是当 #sidebar 或 #mainContent 中出现 margin　属性时才会需要修改。而 overflow:hidden 的作用就是当 #sidebar 或 #mainContent 中有内容超出这个宽度则自动换行，这个属性在制作自适应皮肤时尤其显得重要。

　　下面是自适应皮肤制作时正确的书写方法：
[code] #sidebar{float:right;width:24%;overflow:hidden}
#mainContent{float:left;width:75%;overflow:hidden}[/code]
　　这里，我预留出了1%的宽度出来，这样就不会出现皮肤错位的情况了。同样的道理，通常我们在制作非自适应皮肤的时候也应该预留出几个像素的宽度来，如10px~20px。

　　一些朋友问我，同样使用的%来设定自适应皮肤宽度的，当改变分辨率时，皮肤会错位，这是因为忘记了在 #sidebar 或 #mainContent 增加 overflow:hidden 属性了，这个属性是非常重要的。

　　下面，本人编写了两个小文件来测试一下效果：
[html]


这是mainContent，背景为绿色

这一行用作测试是否自动换行———————————————————————————————————————————–

Theme Brought to you by Directory Journal and Elegant Directory