滚动条代码大集合

凭窗远眺 · 发表于 2007-12-4 02:23

如果你日志或自定义模块内的东西太多了，使得版面不好看，那么滚动条的使用可以帮你个大忙哦！上面有几款滚动条的样式，如果喜欢，就试试吧！代码就在滚动条实例里面哦！

代码中红色的部分是可以根据自己的需要任意更改的哦！！herbe是为了日志排版所以弄的小一点的呢。

想知道如何把代码弄到自定义模块的朋友请看下面的操作步骤吧！

★置入博客的方法★

1. 进入编辑→2. 排版→3. 模块→

4. 添加自定义html（显示）（出现在网页左下角）→

5. 复制下列语法代码後贴入自定义中→6. 新增

7. 将模块移到想显示的位置→8. 再保存（右上角）→

9. 预览我的博客。→10. 就可以看到出现在你的博客上了！

1.带背景颜色的实线边框滚动条

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid;SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 200px;

SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:

#33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid;

SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 150px; BACKGROUND-COLOR: #ccffcc" align=center>

<DIV align=left><FONT color=#009900>文字</FONT></DIV>

2.无背景颜色的实线边框滚动条

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid;

SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid;

WIDTH: 200px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e;

SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000;

BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 150px" align=center>文字</DIV>

3.无背景颜色的虚线边框滚动条

<DIV style="BORDER-RIGHT: #006c90 1pt dashed; BORDER-TOP: #006c90 1pt dashed;

SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:

auto; BORDER-LEFT:#006c90 1pt dashed; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR:

COLOR:#000000 ; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR:

#006c90; BORDER-BOTTOM: #006c90 1pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT color=#0060c0 >文字</FONT></DIV>

4.无背景颜色的双线边框滚动条

5.无背景颜色的圆点边框滚动条

<DIV style="BORDER-RIGHT: #00b490 thick dotted; BORDER-TOP: #00b490 thick dotted;

SCROLLBAR-FACE-COLOR: #fcfcfc; SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc; OVERFLOW: auto;

BORDER-LEFT: #00b490 thick dotted; WIDTH: 200px; SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;

SCROLLBAR-ARROW-COLOR: #00b490; SCROLLBAR-TRACK-COLOR: #fcfcfc; BORDER-BOTTOM:

#00b490 thick dotted; SCROLLBAR-DARKSHADOW-COLOR: #fcfcfc; HEIGHT: 150px" align=left>

<FONT color=#000000>文字</FONT></DIV>

6.无背景颜色的外凸边框滚动条

<DIV style="BORDER-RIGHT: #b46cfc outset; BORDER-TOP: #b46cfc outset;

SCROLLBAR-FACE-COLOR:#d8b4fc; SCROLLBAR-HIGHLIGHT-COLOR: #d8b4fc;

OVERFLOW: auto; BORDER-LEFT: #b46cfc outset; WIDTH: 200px;

SCROLLBAR-SHADOW-COLOR: #d8b4fc; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:

#d8b4fc; SCROLLBAR-ARROW-COLOR: #b424b4; BORDER-BOTTOM: #b46cfc outset;

SCROLLBAR-DARKSHADOW-COLOR: #d8b4fc; HEIGHT: 150px" align=center>

<FONT color=#000000>文字</FONT></DIV>

7.有背景颜色的浮出立体线框滚动条

<DIV style="BORDER-RIGHT:#fcb4d8 ridge; BORDER-TOP:

#fcb4d8 ridge; SCROLLBAR-FACE-COLOR: #fcb4d8;

SCROLLBAR-HIGHLIGHT-COLOR: #fcb4d8; OVERFLOW: auto;

BORDER-LEFT: #fcb4d8 ridge; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR:

#fcb4d8; COLOR: #fcb4d8; SCROLLBAR-3DLIGHT-COLOR: #fcb4d8;

SCROLLBAR-ARROW-COLOR: #d82448; BORDER-BOTTOM: #fcb4d8 ridge;

SCROLLBAR-DARKSHADOW-COLOR: #fcb4d8; HEIGHT: 150px; BACKGROUND-COLOR:

#fcb4d8" align=center>< align=left><FONT color=#8000ff>文字</FONT></P></DIV>

</DIV></DIV>

笑寒 · 发表于 2008-1-5 21:56

收藏一下,要用的时候就不客气来拿了啊

失忆 · 发表于 2008-3-9 22:25

很使用喜欢

faruyun · 发表于 2008-4-10 17:49

先谢谢！等学会了再用。

天天 · 发表于 2008-4-15 23:02

先谢谢了，等要用的时候就不客气了！！

如果你日志或自定义模块内的东西太多了，使得版面不好看，那么滚动条的使用可以帮你个大忙哦！上面有几款滚动条的样式，如果喜欢，就试试吧！代码就在滚动条实例里面哦！代码中红色的部分是可以根据自己的需要任意更改的哦！！herbe是为了日志排版所以弄的小一点的呢。想知道如何把代码弄到自定义模块的朋友请看下面的操作步骤吧！ ★置入博客的方法★ 1. 进入编辑→2. 排版→3. 模块→ 4. 添加自定义html（显示）（出现在网页左下角）→ 5. 复制下列语法代码後贴入自定义中→6. 新增 7. 将模块移到想显示的位置→8. 再保存（右上角）→ 9. 预览我的博客。→10. 就可以看到出现在你的博客上了！

[ 本帖最后由天天于 2008-4-15 23:07 编辑 ]

老树新枝 · 发表于 2008-4-16 12:34

谢谢楼主,辛苦啦.
我全部收藏了

碎影舞斜阳 · 发表于 2008-4-16 21:10

0000000000000000000

[ 本帖最后由碎影舞斜阳于 2008-4-16 21:11 编辑 ]

碎影舞斜阳 · 发表于 2008-4-16 21:12

辛苦

夜色迷离 · 发表于 2008-4-22 10:50

谢谢教导！

taku · 发表于 2008-4-23 20:27

感谢楼主

账号		自动登录	找回密码
密码			中文注册

[教程] 滚动条代码大集合