Jin 的个人资料❤ ｡◕‿◕｡๑۩天平宫主 の咖啡屋۩๑｡◕‿◕...照片日志列表更多  |  工具 帮助 |
各式各样的流动条很多人問讓文章怎麼使用捲軸怎麼使用，捲軸語法太過於複雜，以致很多人當場昏倒在電腦前。當我清醒時，決定好好學這捲軸。這是我做的筆記，希望對大家有所幫助。 以下分成三部份1是主要的部分，2 或 3 依自己的需求選擇使用，也可以完全不使用。至於4參考用。 注意: 以下編輯都是在"編輯網誌內容"(?點我)模式裡的"<HTML>模式"(?點我)中進行。 請注意" : " " ; "和 "空格" 的位置，以免失敗。 1.基本捲軸HTML語法： <DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600">編輯文字圖片內容</DIV> 效果(基本):
編輯文字圖片內容(內容區域)
↑捲軸外圍包含的區域為 顯示區域 用法:
(替換語法時，注意style=""中的內容，每一部分用"分號 ;"隔開，接著空一格。)
1.當"內容區域"大於"顯示區域"時，可利用捲軸讓看見超出範圍的內容。利用滑 鼠游標調整"顯示區域"，滑鼠游標點選捲軸，會變成可調整大小的狀態，可隨 心所欲的調整大小，語法中的width和height也會隨著變。 PS:去除width:10px的元素，寬會自動擴展到最大。
2.語法( OVERFLOW: scroll )為顯示右方和下方捲軸。整個還可以分別替換成 ★( OVERFLOW: auto ) : "內容區域"大於"顯示區域"會自動顯示捲軸，建議使用。 ★( OVERFLOW: scroll; OVERFLOW-X: hidden ): 刪除水平→捲軸。 ★( OVERFLOW: scroll; OVERFLOW-Y: hidden ): 刪除垂直↑捲軸。 ★( OVERFLOW: hidden) : 不使用捲軸。
3.語法( background-color: #996600 )為框框內的背景顏色，#996600 部分為16進位顏 色碼(?)，可在查詢 4096 Color Wheel ，記得要加上"#"。 PS.整段刪除，背景變成透明狀態。
2.為捲軸加外框基礎語法(見上面1.基本捲軸)中，在style="__"中，在__的地方加入( BORDER: #ff0000 5px dotted )， 情況如下(加入的語法為畫底線): HTML語法： <DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted">編輯文字圖片內容</DIV> 效果(基本+外框):
編輯文字圖片內容
見到，( 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 )都有共同結構，分析如下:
( BORDER: #ff0000 5px dotted )
★(#ff0000)框的顏色，#996600 部分為16進位顏色碼(?)，可在查詢
4096 Color Wheel ，記得要加上"#"，依框的屬性上下左右可調整不同顏色。
★(5px):框的大小,數字越大，框就越粗。0為無框。
★(dotted):框的類型，(dotted)為"點"的型態，可替換其他的有 實線:( solid )， 虛線:( dashed )，立體內凸框:(groove)，立體浮凸框: (ridge)， 雙實線: (double)，凹框: ( inset)，凸框: (outset)，依框的屬性可調整上下左 右使用不同屬性的框。
3.為捲軸調色:首先取得{捲軸顏色語法}內容可以用捲軸顏色產生器取得，捲軸顏色產生器網址如下: 捲軸顏色產生器編輯完成後會得到如下語法: <style> 複製以上所需要反白部份，此反白部份為捲軸變色的語法。在基礎語法(見上面1.基本捲軸)中，在style="__"中，在__的地方加入反白部份。注意，每一部分用"分號 ;"隔開，接著空一格。得到的結果如下(加入的語法為畫底線):
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">編輯文字圖片內容</DIV> 效果(基本+外框+卷軸顏色):
編輯文字圖片內容
用法:(可依顏色對應相關位置)
■( SCROLLBAR-HIGHLIGHT-COLOR: )捲軸與按鈕四周內邊框左上 立體亮面的顏色。 ■( SCROLLBAR-SHADOW-COLOR: )捲軸與按鈕四周內邊框右下立 體暗面的顏色。 ■( SCROLLBAR-3DLIGHT-COLOR: )捲軸與按鈕四周外邊邊框左上 立體亮面的顏色。 ■( SCROLLBAR-TRACK-COLOR: )捲軸軌道的顏色。 ■( SCROLLBAR-DARKSHADOW-COLOR: )捲軸與按鈕四周外 邊框右下立體暗面的顏色。 ■( SCROLLBAR-BASE-COLOR: )捲軸整體的顏色，單獨使用效果 比較明顯。 以上的語法後面加上(#777777)為16進位顏色碼(?)，可在查詢 4096 Color Wheel ， 記得要加上"#"
4.變化應用:1.左側拖曳棒 HTML語法: <DIV style="OVERFLOW: scroll; DIRECTION: rtl; HEIGHT: 60px; BACKGROUND-COLOR: #996600"> <DIV style="DIRECTION: ltr" align=left>編輯文字圖片內容</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">編輯文字圖片內容</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">編輯文字圖片內容</DIV></DIV> 效果: 編輯文字圖片內容
4.發光的捲軸 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">編輯文字圖片內容</DIV></DIV> 效果: 編輯文字圖片內容
5.加上背景的捲軸 ★背景不跟捲軸移動 HTML語法: <TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; HEIGHT: 60px">編輯文字圖片內容</DIV></TD></TR></TBODY></TABLE> 效果:
★背景跟卷軸移動 HTML語法: <DIV style="OVERFLOW: auto; HEIGHT: 60px"><TABLE width="100%" background=背景圖片連結><TBODY><TR><TD vAlign=top align=left>編輯文字圖片內容</TD></TR></TBODY></TABLE></DIV> 效果:
摘自:╮(╯▽╰)/夢與天堂の空想世界~ 引用通告此日志的引用通告 URL 是： http://sky1001hy.spaces.live.com/blog/cns!5AE7A2745DFDBF75!469.trak 引用此项的网络日志
|
|
|
