收藏本页 | 网站地图 | 投稿指南
 
 
当前位置:首页 >> 学院首页 >> 网页设计 >> CSS >>

浏览器滚动条“美容”法

放大字体  缩小字体  At: 2005-09-02 20:26  By: master8 转载 来源: 互联网
也许你早就注意到了这个问题:页面中的滚动条只能是灰灰的吗?尤其是我们在丰富多
彩的页面设计或者使用框架时,灰灰的滚动条和我们精心设计的页面风格格格不入。下面就让
我们来对滚动条进行一次大处理,使它看起来同我们辛辛苦苦设计的页面更加的协调一致。
  其实要改变滚动条的外观很简单,你只需在页面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>
  其中:SCROLLBAR-FACE-COLOR、SCROLLBAR-HIGHLIGHT-COLOR、SCROLLBAR-SHADOW
-COLOR、SCROLLBAR-ARROW-COLOR、SCROLLBAR-BASE-COLOR、SCROLLBAR-DARKSHADOW-COLOR分别用于
指定滚动条不同部分的颜色值,“:”后面的就是指定的相应色值,可用HTML色彩常量或直接
指定16进制的色值(如:#FFFFFF 是白色)。如上例就实现了一个平板式的黄色背景,蓝色单
线框的滚动条。

  滚动条的风格就是通过恰当的指定不同部位的色值来达到的,你可以结合图一给不同部
位指定不同颜色来实现你所需要的各种各样的滚动条。

  现在轮到你了!你需要什么样式的呢?动手试试看,你也会做出很棒的效果。
 






         









 
Google
论坛精华  
 
 
  ©2005-2008 站长吧 Master8.NET All Rights Reserved 陕ICP备05010609号