<style type="text/css">
.div1
{
height:100px;
width:100px;
border:1px solid #ccc;
overflow-y:scroll;
float:left;
overflow-x:hidden;
position:relative;
}
/**
* @brief 淡蓝色
*/
.ScrollLightBlue
{
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
}
.ScrollRed
{
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
}
.ScrollGreen
{
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
}
.ScrollOrange{
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
}
.ScrollGray
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
.ScrollBlack
{
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollLightRed
{
scrollbar-face-color: #682222;/*#CEEF94;*/
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollBlue
{
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
</style>
通过CSS 能实现的网页中的滚动条效果还是丰富多彩的,先来看下面的一些效果图。对应的源代码帖在后面。
scrollbar-face-color:#B0DCF8; scrollbar-shadow-color:#CAEBFF; scrollbar-highlight-color:#95D4FB; scrollbar-3dlight-color:#95D4FB; scrollbar-darkshadow-color:#95D4FB; scrollbar-track-color:#EFF8FF; scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color: #FFB2B5; scrollbar-arrow-color: #EF696B; scrollbar-shadow-color: #F79694; scrollbar-3dlight-color: #F7A6A5; scrollbar-track-color: #FFDFE7; scrollbar-highlight-color: #FFD3D6; scrollbar-darkshadow-color: #FFD7DE;
scrollbar-face-color: #C6E78C; scrollbar-arrow-color: #52AE29; scrollbar-3dlight-color: #9CDF5A; scrollbar-track-color: #DEF3BD; scrollbar-shadow-color: #8CCB63; scrollbar-highlight-color: #CEF38C; scrollbar-darkshadow-color: #BDE39C;
scrollbar-face-color: #FFD58D; scrollbar-arrow-color: #FA9B19; scrollbar-3dlight-color: #ff8000; scrollbar-track-color: #FEF8D8; scrollbar-shadow-color: #ff8000; scrollbar-highlight-color: #CEF38C; scrollbar-darkshadow-color:brown;
scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1;
scrollbar-face-color:#999; scrollbar-3dlight-color:#ccc; scrollbar-arrow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF;
scrollbar-face-color:#999; scrollbar-3dlight-color:#ccc; scrollbar-arrow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF;
scrollbar-face-color: #4786C4; scrollbar-3dlight-color:#fff; scrollbar-arrow-color:#B7CBE4; scrollbar-highlight-color:#FFFFFF;
说明如下图:
源代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1
{
height:100px;
width:100px;
border:1px solid #ccc;
overflow-y:scroll;
float:left;
overflow-x:hidden;
position:relative;
}
/**
* @brief 淡蓝色
*/
.ScrollLightBlue
{
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
}
.ScrollRed
{
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
}
.ScrollGreen
{
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
}
.ScrollOrange{
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
}
.ScrollGray
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
.ScrollBlack
{
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollLightRed
{
scrollbar-face-color: #682222;/*#CEEF94;*/
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollBlue
{
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
</style>
</head>
<body>
<div class="div1 ScrollLightBlue">
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
</div>
<div class="div1 ScrollRed">
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
</div>
<div class="div1 ScrollGreen">
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
</div>
<div class="div1 ScrollOrange">
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
</div>
<div class="div1 ScrollGray">
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
</div>
<div class="div1 ScrollBlack">
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
</div>
<div class="div1 ScrollLightRed">
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
</div>
<div class="div1 ScrollBlue">
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
</div>
说明如下图:
<img src="4551178_0500.gif"/>
</body>
</html>
分享到:
相关推荐
但对于一些人来说要加入这些代码还不是那么容易,或者当您要将您网站的网页全部换一个滚动条的风格的话,可就不那么容易了,而使用"网页美化之滚动条"您可以轻松添加/更改一个网页或网站的滚动条颜色!
制作网页中的滚动条 制作网页中的滚动条 制作网页中的滚动条
超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果 超酷带纹理网页滚动条效果
今天用pop的弹出窗口里,出现一个问题,当网页出现滚动条里,不能遮挡住,解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
去掉网页中多余的滚动条
HTML网页滚动条滚动插件(匀速滚动,支持向上向下滚动)
JS自定义滚动条 可以自定义 很多类型的网页滚动条,跳出了传统的滚动条式样.
网页局部div随滚动条置顶滚动 效果很好,跟普通的滚动不太一样,没有延迟。
网页滚动条样式css智能配色器 网页滚动条样式css智能配色器 网页滚动条样式css智能配色器
iframe的滚动条问题:显示隐藏滚动条.doc
带关闭的网页广告滚动条,可直接用于各类网站,有展示页面
ASP.NET网页随滚动条滑动的层,ASP.NET页面随滚动条滚动
百度里搜了一下,原来已经有高手采用jquery来改变滚动条的单调样式了。 首先要引用两个脚本:jquery.js,jscroll.js; 接着为要出现滚动条的位置写上overflow:auto;这时会出现滚动条,最原始的样子。接着,加上...
阻止滚动条事件mousewheel冒泡,当网页内部元素滚动条到顶或底时不触发浏览器窗口的滚动条事件。
JQuery滚动条兼容所有浏览器 JQuery滚动条插件 同时可以具备一个页面上有多个滚动条显示 但须其优先级最高 比如您要触发某个滚动条 就须在触发后其优先级最高 即可!
去掉水平滚动条: <body hidden"> 去掉竖直滚动条: <body hidden"> 隐藏横向滚动条,显示纵向滚动条: <body
对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar对网页滚动条的隐藏及显示控制.rar
对网页的 滚动条进行修改。让代码修改可视化 。。适用于想要改动滚动条效果却不懂代码的人
js自定义滚动条,支持自定义样式,支持ios硬件加速。
网页制作用的一个设置IE滚动条 CSS样式的小工具