滾動條代碼大集合

憑窗遠眺

如果你日志或自定義模塊內的東西太多了，使得版面不好看，那么滾動條的使用可以幫你個大忙哦！上面有幾款滾動條的樣式，如果喜歡，就試試吧！代碼就在滾動條實例里面哦！

代碼中紅色的部分是可以根據自己的需要任意更改的哦！！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.無背景顏色的雙線邊框滾動條

<DIV style="BORDER-RIGHT: #fc48b4 double; BORDER-TOP: #fc48b4 double; SCROLLBAR-FACE-COLOR: #fcd8fc; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #fc48b4 double; WIDTH: 200px; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #d800b4; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #fc48b4 double; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT color=#000000>文字</FONT></DIV>

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>

笑寒

收藏一下,要用的時候就不客氣來拿了啊

失憶

很使用 喜歡

faruyun

先謝謝！等學會了再用。

天天

先謝謝了，等要用的時候就不客氣了！！

如果你日志或自定義模塊內的東西太多了，使得版面不好看，那么滾動條的使用可以幫你個大忙哦！上面有幾款滾動條的樣式，如果喜歡，就試試吧！代碼就在滾動條實例里面哦！ 代碼中紅色的部分是可以根據自己的需要任意更改的哦！！herbe是為了日志排版所以弄的小一點的呢。 想知道如何把代碼弄到自定義模塊的朋友請看下面的操作步驟吧！ ★置入博客的方法★ 1. 進入編輯→2. 排版→3. 模塊→ 4. 添加自定義html（顯示）（出現在網頁左下角）→ 5. 復制下列語法代碼後貼入自定義中→6. 新增 7. 將模塊移到想顯示的位置→8. 再保存（右上角）→ 9. 預覽我的博客�！�10. 就可以看到出現在你的博客上了！

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

老樹新枝

謝謝樓主,辛苦啦.
我全部收藏了

碎影舞斜陽

0000000000000000000

[ 本帖最后由 碎影舞斜陽 于 2008-4-16 21:11 編輯 ]

碎影舞斜陽

辛苦

夜色迷離

謝謝教導！

taku

感謝樓主