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

发布时间：2006-10-09 11:08:00　来源：网友评论 0 条

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

<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>
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
</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>　　　　　　　　　　　　　　　　　　　　　　</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 全部选择提示：你可先修改部分代码，再按运行]

无相关信息

【评论】【收藏本文】【打印】【关闭】

上一篇文章：避免表格table被撑开变形的CSS

下一篇文章：网页制作基础技巧单选框和复选框的应用