| | | 浏览器滚动条“美容”法 | | 2002-08-05·
·李捷··天极设计在线
| 也许你早就注意到了这个问题：页面中的滚动条只能是灰灰的吗？尤其是我们在丰富多彩的页面设计或者使用框架时，灰灰的滚动条和我们精心设计的页面风格格格不入。下面就让我们来对滚动条进行一次大处理，使它看起来同我们辛辛苦苦设计的页面更加的协调一致。
其实要改变滚动条的外观很简单，你只需在页面HTML代码的＜body＞......＜/body＞之间加入下列几行代码即可：
＜style＞
BODY {
SCROLLBAR-FACE-COLOR: yellow;
SCROLLBAR-HIGHLIGHT-COLOR:white;
SCROLLBAR-SHADOW-COLOR: white;
SCROLLBAR-ARROW-COLOR: black;
SCROLLBAR-BASE-COLOR:blue;
SCROLLBAR-DARKSHADOW-COLOR: blue
}
＜/style＞ |
 左边代码在IE中的 显示效果 |
其中：SCROLLBAR-FACE-COLOR、SCROLLBAR-HIGHLIGHT-COLOR、SCROLLBAR-SHADOW-COLOR、SCROLLBAR-ARROW-COLOR、SCROLLBAR-BASE-COLOR、SCROLLBAR-DARKSHADOW-COLOR分别用于指定滚动条不同部分的颜色值（所对应部分请看 图一 ），“：”后面的就是指定的相应色值，可用HTML色彩常量或直接指定16进制的色值（如：#FFFFFF 是白色）。如上例就实现了一个平板式的黄色背景，蓝色单线框的滚动条。
图一
 滚动条的风格就是通过恰当的指定不同部位的色值来达到的，你可以结合图一给不同部位指定不同颜色来实现你所需要的各种各样的滚动条。
右图就是另一个滚动条配色的实例效果，是不是很酷？
现在轮到你了！你需要什么样式的呢？动手试试看，你也会做出很棒的效果。
| | | 感谢
访问天极网，如果您觉得该文章涉及版权问题，请看这里！
|
|
