1,基本捲軸HTML語法：<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600">編輯文字圖片內(nèi)容</DIV>
用法:
(替換語法時，注意style=""中的內(nèi)容，每一部分用"分號 ;"隔開，接著空一格。)
1.當"內(nèi)容區(qū)域"大於"顯示區(qū)域"時，可利用捲軸讓看見超出范圍的內(nèi)容。利用滑
鼠游標調(diào)整"顯示區(qū)域"，滑鼠游標點選捲軸，會變成可調(diào)整大小的狀態(tài)，可隨
心所欲的調(diào)整大小，語法中的width和height也會隨著變。
PS:去除width:10px的元素，寬會自動擴展到最大。
2.語法( OVERFLOW: scroll )為顯示右方和下方捲軸。整個還可以分別替換成
★( OVERFLOW: auto ) : "內(nèi)容區(qū)域"大於"顯示區(qū)域"會自動顯示捲軸，建議使用。
★( OVERFLOW: scroll; OVERFLOW-X: hidden ): 刪除水平→捲軸。
★( OVERFLOW: scroll; OVERFLOW-Y: hidden ): 刪除垂直↑捲軸。
★( OVERFLOW: hidden) : 不使用捲軸。
3.語法( background-color: #996600 )為框框內(nèi)的背景顏色，#996600 部分為16進位顏
色碼，記得要加上"#"。
PS.整段刪除，背景變成透明狀態(tài)。
2.為捲軸加外框
基礎(chǔ)語法中，在style="__"中，在__的地方加入( BORDER: #ff0000 5px dotted )，
情況如下:
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted">編輯文字圖片內(nèi)容</DIV>
加入后，切換編輯列上"<HTML>"(?點我)兩次后，在回到"<HTML>模式"(?點我)中就會見到，( BORDER: #ff0000 5px dotted )被拆成四部份分別BORDER-RIGHT(右邊框)，BORDER-TOP(上邊框)，BORDER-LEFT(左邊框)， BORDER-BOTTOM(底邊框)變成
(BORDER-RIGHT: #ff0000 5px dotted;
BORDER-TOP: #ff0000 5px dotted;
BORDER-LEFT: #ff0000 5px dotted;
BORDER-BOTTOM: #ff0000 5px dotted )。
用法:
(BORDER: #ff0000 5px dotted)或(BORDER-RIGHT: #ff0000 5px dotted; BORDER-TOP: #ff0000 5px dotted; BORDER-LEFT: #ff0000 5px dotted; BORDER-BOTTOM: #ff0000 5px dotted )都有共同結(jié)構(gòu)，分析如下:
( BORDER: #ff0000 5px dotted )
★(#ff0000)框的顏色，#996600 部分為16進位顏色碼，記得要加上"#"，依框的屬性上下左右可調(diào)整不同顏色。
★(5px):框的大小,數(shù)字越大，框就越粗。0為無框。
★(dotted):框的類型，(dotted)為"點"的型態(tài)，可替換其他的有 實線:( solid )，
虛線:( dashed )，立體內(nèi)凸框:(groove)，立體浮凸框: (ridge)，
雙實線: (double)，凹框: ( inset)，凸框: (outset)，依框的屬性可調(diào)整上下左
右使用不同屬性的框。
3.為捲軸調(diào)色:
首先取得{捲軸顏色語法}內(nèi)容可以用捲軸顏色產(chǎn)生器取得，捲軸顏色產(chǎn)生器網(wǎng)址如下:
捲軸顏色產(chǎn)生器http:///cdh/no04.htm
捲軸顏色編輯器http://wao317./317/layout.php
自動捲軸配色編碼器【 顏色代碼 】在線匯總
捲軸顏色生成器http://hw-driver-bal.:52833/pub/slime/teach/Bar.htm
捲軸顏色產(chǎn)生器編輯完成后會得到如下語法:
<style>
BODY {
SCROLLBAR-FACE-COLOR: #00ffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffff00;
SCROLLBAR-SHADOW-COLOR: #777777;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #00ff00;
SCROLLBAR-TRACK-COLOR: #770000;
SCROLLBAR-DARKSHADOW-COLOR: #ff00ff;
SCROLLBAR-BASE-COLOR: #0000ff
}
</style>
復製以上所需要反黃部份，此反黃部份為捲軸變色的語法。在基礎(chǔ)語法(見上面1.基本捲軸)中，在style="__"中，在__的地方加入反白部份。注意，每一部分用"分號 ;"隔開，接著空一格。得到的結(jié)果如下(加入的語法為畫底線):
HTML語法：
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted; SCROLLBAR-FACE-COLOR: #00ffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffff00;
SCROLLBAR-SHADOW-COLOR: #777777;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #00ff00;
SCROLLBAR-TRACK-COLOR: #770000;
SCROLLBAR-DARKSHADOW-COLOR: #ff00ff;
SCROLLBAR-BASE-COLOR: #0000ff">編輯文字圖片內(nèi)容</DIV>
用法:
■( SCROLLBAR-FACE-COLOR: )拖曳棒與按鈕表面顏色。
■( SCROLLBAR-HIGHLIGHT-COLOR: )捲軸與按鈕四周內(nèi)邊框左上
立體亮面的顏色。
■( SCROLLBAR-SHADOW-COLOR: )捲軸與按鈕四周內(nèi)邊框右下立
體暗面的顏色。
■( SCROLLBAR-3DLIGHT-COLOR: )捲軸與按鈕四周外邊邊框左上
立體亮面的顏色。
■( SCROLLBAR-ARROW-COLOR: )按鈕箭頭▲▼顏色。
■( SCROLLBAR-TRACK-COLOR: )捲軸軌道的顏色。
■( SCROLLBAR-DARKSHADOW-COLOR: )捲軸與按鈕四周外
邊框右下立體暗面的顏色。
■( SCROLLBAR-BASE-COLOR: )捲軸整體的顏色，單獨使用效果
比較明顯。
4.變化應用:
1.左側(cè)拖曳棒
HTML語法:
<DIV style="OVERFLOW: scroll; DIRECTION: rtl; HEIGHT: 60px; BACKGROUND-COLOR: #996600">
<DIV style="DIRECTION: ltr" align=left>編輯文字圖片內(nèi)容</DIV></DIV>
2.隱形的捲軸(只看的見按鈕箭頭▲▼)
HTML語法:
<DIV style="SCROLLBAR-FACE-COLOR: #996600; SCROLLBAR-HIGHLIGHT-COLOR: #996600; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #996600; SCROLLBAR-3DLIGHT-COLOR: #996600; SCROLLBAR-TRACK-COLOR: #996600; SCROLLBAR-DARKSHADOW-COLOR: #996600; HEIGHT: 60px; SCROLLBAR-ARROW-COLOR:#FF0000; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV>
3.透明的捲軸
HTML語法:
<DIV style="FILTER: Chroma(Color=green); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV></DIV>
4.發(fā)光的捲軸
HTML語法:
<DIV style="FILTER: Chroma(Color=green)glow(color:6666ff,Strength=6); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV></DIV>
5.加上背景的捲軸
★背景不跟捲軸移動
HTML語法:
<TABLE width="100%" background=背景圖片連結(jié)><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; HEIGHT: 60px">編輯文字圖片內(nèi)容</DIV></TD></TR></TBODY></TABLE>
★背景跟卷軸移動
HTML語法:
<DIV style="OVERFLOW: auto; HEIGHT: 60px"><TABLE width="100%" background=背景圖片連結(jié)><TBODY><TR><TD vAlign=top align=left>編輯文字圖片內(nèi)容</TD></TR></TBODY></TABLE></DIV>
