更漂亮的首页四格效果【代码分享】

演示效果： http://www.yelia.com/bbs/SupeSite/X-Space官方站'r\j#tO8wU
SupeSite/X-Space官方站"M'e7c R;A8|G
非AD。如果不想送IP的话，请看附件图中的演示效果~
tok@z0
3Y8|/F`&A0
!y3B(w"o@:Sc{;E0SupeSite/X-Space官方站vP
R5Hs(dU3Y
capture.jpg
CT5u7M3[n O0
sa
V2O"~+j ` v0capture1.jpgSupeSite/X-Space官方站4Ow{? Q

#e#E
B8j;O] kgx!y0代码很简单，只是在表格中加入两个背景图片即可。为了与背景图片相适应，指定了表格的行高

CODE:

_Hs*mVa3?0<td width="24" background="images/yelia/nature/rank.gif"></td>
*yYn8rp0<td background="images/yelia/nature/rankbg.gif" style="line-height:26px" valign="top">之前想给每一条最新TOP10的前面加一个序号图片，研究了很久代码，因为对php不熟所以失败了。后来采用了Maxspead模板的显示方法，直接用背景图来显示。
t'UK8nI+ax,IK1[0这样的方法是比较简单。你也可以把这个设置加入到css.html中去，再在discuz.html里使用指定的样式即可。
+_"@*e(yM3]Q0SupeSite/X-Space官方站8@+y8E)PyL/~N@
可能有人对这样每行的行高不满意，，，我给大家另外做了一套 20px 行高的图，自己选择使用即可~ 顺便把代码里的“ line-height:26px ”改为“ line-height:20px ”......SupeSite/X-Space官方站vN8E.ZT4v1YK$e

%VUO/guD'DS!x0个人感觉这样还是比较漂亮的。当然，要根据各自的论坛的风格，气质来决定四格的显示效果。。。这里只是提供了一种思路。
hD7hX.qP$W0SupeSite/X-Space官方站a:a)vHD&c9z
SupeSite/X-Space官方站-H,Z.Avt
哦，对了，，没有安装首页四格的朋友，我不必再重复了。在插件区随便搜索一下就能找到好多个教程。都差不多的啦~
yV8S1I6d0
K"[lj)|t0g4W0[ 本帖最后由 阿喀琉斯 于 2007-5-7 02:13 编辑 ]
)hxJ3Lb#a(Bp0
GE[K BE"ZK0rank.gif
w`2RoT7\4CV y_FW0
@4r EU%IcCi(^4}0rankbg.gifSupeSite/X-Space官方站6}-S7u)CLO@

6u"J*\ v*q@@
J8mp0rank.gifSupeSite/X-Space官方站wUY;q `7gy F&G
~
SupeSite/X-Space官方站os(S0wm,y
rankbg.gif