自定义个性滚动条css样式全程攻略

最新推荐文章于 2023-03-03 18:34:00 发布

yjxfox

最新推荐文章于 2023-03-03 18:34:00 发布

阅读量538

点赞数

滚动条的美化自然应该列为一个重要的内容放在博客装饰教程中详细的讲解，与博客主色调合理搭配是是滚动条美化的基本要求。大家不应该做出一个与主体完全不符的样式来，这个另类的做法只能让人家一看就知道你是外行来了。冰河今天就整理出这篇文章来希望可以解决大家存在的问题。本文由冰河独立整理完成。如有雷同，纯属巧合！

滚动条代码：

 <STYLE>
BODY{
overflow-x:hidden;                /*隐藏底部的横向滚动条*/
scrollbar-arrow-color: #f4ae21;  /*三角箭头的颜色*/
scrollbar-face-color:#333;      /*立体滚动条的颜色*/
scrollbar-3dlight-color:#666;   /*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color:#999;    /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#666; /*滚动条强阴影颜色*/
scrollbar-track-color:#666;     /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8;   /*滚动条的基本颜色*/
}
</STYLE>

1.代码说明参照上面的文字说明（文字没有必要删除，如为了美观可以删除。）；

上面的代码的确很麻烦，有没有一种简单直观的形式呢？哈哈这个自然了！我们都喜欢傻瓜式的啦。本人博客的绿色滚动条就是这个工具做的。下面冰河就介绍一下

个性滚动条配色工具（一）：

操作说明：

调色的时候先在Flat那里选择Windows，然后根据自己爱好进行调色，调好之后选中“CSS”代码，复制方框里的代码，就可以添加到博客自定义面板了。

注意：这是CSS代码，不能放在完全没有东西的空白面板里，可以把它放到已有内容的面板中。

代码举例：

 <style> /*注：在代码前添加　 　防止屏蔽*/
BODY { SCROLLBAR-ARROW-COLOR:#0033FF;
SCROLLBAR-FACE-COLOR:#0033CC;
SCROLLBAR-DARKSHADOW-COLOR:#0033CC;
SCROLLBAR-HIGHLIGHT-COLOR:#993399;
SCROLLBAR-3DLIGHT-COLOR:#996633;
SCROLLBAR-SHADOW-COLOR:#993366;
SCROLLBAR-TRACK-COLOR:#996600;}
</style>

个性滚动条配色器（二）：

几种滚动条的特效：　

1、控制横向和纵向滚动条的显隐

去掉滚动条 x 轴 <bodystyle="overflow-y:hidden">
去掉滚动条 y 轴 <body style="overflow-x:hidden">
滚动条 x/y 轴全部去掉 <body scroll="no">

2、滚动条颜色

SCROLLBAR-FACE-COLOR 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR 滚动条的基本颜色

3、箭行符号滚动条代码

4、一侧滚动条代码

5、朴素型滚动条代码

6、一侧滚动条代码

7、立体型滚动条代码

?/P>

如果你是新手建议你看文章：如何添加自己的代码到版块（图示）新手必读

添加方法：

１，控制面板----首页内容维护----定义空白模板----新建,创建模块标题，显示源代码粘贴代码--保存并返回；

２，控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上并保存，移动新建面板位置--保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来