主题:  中国MSN主页中的四个方格的彩色边线是如何制作的!

mcareyli

职务:普通成员
等级:1
金币:0.0
发贴:48
#12002/9/15 20:11:21
就是四个方格外的四种不同颜色的线条,那是怎么进行制作融合的!
china.msn.com/



Syawn

职务:普通成员
等级:5
金币:10.0
发贴:2930
#22002/9/15 20:35:01
css
对四个不同方向的边框进行设置。



NudeAngel

职务:普通成员
等级:3
金币:10.0
发贴:793
#32002/9/16 14:26:20
也可以用表格嵌套来完成。



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#42002/9/16 16:35:10
虽然用css可以达到类似的效果,但是在msn的页面中,并不是用这种方法来做的。

首先,让我们从msn那烦乱的代码中分离出关键的代码部分:




表格内容

将这段代码copy到body中就可以出现如图的效果:



那么为什么简单的亮暗边框可以做出这种效果呢?
好!让我们将换一下暗边的颜色为红色同时将表格的边框设置为6来放大一下看一看:



这下就可以清楚的看到亮暗边框的具体情况了:
上边框和左边框的外面是light,里面是dark
而右边框和下边框则相反。
这样我们就很容易理解了:当将表格中内容设置一个light后,这个颜色就覆盖了原来右边框和下边框的颜色!

需要注意的是背景颜色=table中dark颜色=td中light颜色!!!
例如:下图中红色背景是一样的效果。



这种方法是虽然简单,但是想法确实很巧妙!!!
鼓励我们更多的去尝试!例如在td中再加一个dark是什么效果?只加一个bgcolor是什么效果?或者怎么产生一个相反的效果?
只要有认真的精神就一定可以获得很多……
                   -----by Flood          

编辑历史:[这消息被flood编辑过(编辑时间2002-09-16 16:35:53)]
[这消息被flood编辑过(编辑时间2002-09-16 16:37:50)]
[这消息被flood编辑过(编辑时间2002-09-16 16:38:26)]


mcareyli

职务:普通成员
等级:1
金币:0.0
发贴:48
#52002/9/16 21:36:24
版主,我还是一个新手,谢谢您的指教,但是我就是不明白,如何将您分离的代码插入到网页中我需要的位置!



udfans

职务:普通成员
等级:2
金币:0.0
发贴:417
#62002/9/16 23:20:04
先将MOUSE放在可视编辑窗口的你需要放入的位置,再在代码窗口找到光标,将代码PASTE即可



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#72002/9/17 7:43:37
实际上这段代码就是一个表格,
将它插入到你的和标签之中的任意你所需要的地方。
而且因为它只是一个表格,你可以按照你的需要任意
改变他的大小,颜色,只要注意上面帖子中所说的那三个颜色保持一致就可以了。



mcareyli

职务:普通成员
等级:1
金币:0.0
发贴:48
#82002/9/17 20:17:38
版主,我知道是插入到body>和标签之中的任意地方,但是如果任意插入的话,预览的结果肯定不是我想要的。
比如说我要让这个彩色的方框插入到设计视图中指定的一个位置,那么在代码视图的方式下,和标签之间有那么多的代码,我怎么知道插入的地方就是我想在设计视图和预览的状态下想要显示方框的地方!谢谢!



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#92002/9/18 8:29:13
你可以首先在设计视图上将光标放到你想插入“彩色方框”的地方,然后切换到代码视图,在光标的位置插如代码就可以了!

还有,这种方法只是设置表格的亮暗边框,所以你可以先将布局表格都作好,然后按照你的需要在相应的表格代码中加上borderColorDark=#ffffff
borderColorLight=#445443,就可以。

多尝试一下



NudeAngel

职务:普通成员
等级:3
金币:10.0
发贴:793
#102002/9/18 10:40:31
其实只要你把表格的亮暗边框的颜色设定为你的叶面的背景色就可以了。



闪凌儿

职务:普通成员
等级:1
金币:0.0
发贴:199
#112003/1/15 10:17:26
我学了一招!谢谢~
;)



brightboy

职务:普通成员
等级:1
金币:0.0
发贴:31
#122003/1/18 10:33:03
!!!