修改IE浏览器滚动条样式的一个实例

浏览器

下面是一个滚动条样式的例子,通过修改各个属性值可以改变滚动条的样子。

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效代码|JsCode.CN|---用CSS控制滚动条样式</title>
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #fcfcfc;
 SCROLLBAR-HIGHLIGHT-COLOR: #6c6c90;
 SCROLLBAR-SHADOW-COLOR: #fcfcfc;
 SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;
 SCROLLBAR-ARROW-COLOR: #240024;
 SCROLLBAR-TRACK-COLOR: #fcfcfc;
 SCROLLBAR-DARKSHADOW-COLOR: #48486c;
 SCROLLBAR-BASE-COLOR: #fcfcfc
}
</STYLE>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
说明:
SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色
<html>
<head>
<style>
Body{
scrollbar-arrow-color: #f4ae21;  /*图6,三角箭头的颜色*/
scrollbar-face-color: #333;  /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666;  /*图1,立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666;  /*图2,滚动条空白部分的颜色*/
scrollbar-shadow-color: #999;  /*图3,立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666;  /*图4,立体滚动条强阴影的颜色*/
scrollbar-track-color: #666;  /*图7,立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8;  /*滚动条的基本颜色*/
}
</style>
</head>
<body></body>
</html>

下面是一个滚动条样式的例子,通过修改各个属性值可以改变滚动条的样子。<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页特效代码|JsCode.CN|---用CSS控制滚动条样式</title><STYLE>BODY {SCROLLBAR-FACE-COLOR: #fcfcfc; SCROLLBAR-HIGHLIGHT-COLOR: #6c6c90; SCROLLBAR-SHADOW-COLOR: #fcfcfc; SCROLLBAR-3DLIGHT-COLOR: #fcfcfc; SCROLLBAR-ARROW-COLOR: #240024; SCROLLBAR-TRACK-COLOR: #fcfcfc; SCROLLBAR-DARKSHADOW-COLOR: #48486c; SCROLLBAR-BASE-COLOR: #fcfcfc}</STYLE></head><body><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></body></html>说明:SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色SCROLLBAR-BASE-COLOR: 滚动条的基本颜色+++++++++++++++++++http://www.huaz.net/Forum/Print.asp?ThreadID=23(2006-10-08 09:51:50) MH<html><head><style>Body{scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/}</style></head><body></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2025-01-01 13:43:35

修改IE浏览器滚动条样式的一个实例的相关文章

学习:使用CSS修改IE浏览器滚动条的参数

css|浏览器 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-ar

修改360浏览器字体样式的方法

  无论是windows系统下默认的IE浏览,还是第三方智能浏览器,在浏览器中的默认字体大小都是一样的,而对于一些使用来说,如果看厌了默认的字体样式,那么赶快通过下方小编提供的方法,来自定义修改自己所喜爱的字体吧! 操作方法 1.进入浏览器的设置选项. 2.在左边的[高级选项]一栏找到[自定义字体]. 3.接着在标准字体中改变你想要的字体. 由于360极速浏览器的内核是采用谷歌chrome浏览器的内核,所以360极速浏览器设置字体的方法同样适用于chrome浏览器,小伙伴们快去试一试吧. 通过上

jQuery滚动条样式插件mCustomScrollbar用法介绍

关于 mCustomScrollbar mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等.总之,你知道非常好用就是了,:-) 下载 如何使用 mCustomScrol

使用CSS样式控制浏览器滚动条的参数总结【zz】

在做到一定特殊风格的网站时候常常为了美观我们需要更改滚动条的颜色及相关设置.那么如何使用标准的样式来控制滚动条呢?经过多次的尝试和总结,我们来简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scr

IE浏览器滚动条的参数总结参考

参考|浏览器 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)    overflow-x水平方向内容溢出时的设置    overflow-y垂直方向内容溢出时的设置    以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色) 

网页制作中有关设置浏览器滚动条的参数

浏览器|网页 有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-arr

浏览器滚动条的参数总结

浏览器  有朋友常提关于IE滚动条的问题,特总结该贴.简单地介绍一下涉及浏览器滚动条的样式表内容(某些样式需ie5.5+才能支持): 1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值).scroll.hidden.auto. 2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)scrollbar-arrow

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式 了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,嗯,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /