HTML學習筆記☆滾動條製作

HTML學習筆記☆滾動條製作滾動條文字詳解滾動條代碼語法解釋<DIV align=center>滾動條框居中<DIV style="基本屬性WIDTH: 300px;寬度300像素HEIGHT: 150px;高度150像素OVERFLOW: scroll;超出範圍時使用滾動條（auto可用scroll代替。用auto會自動適應，即文本的寬或高超出預設的的值，才會出現橫或豎滾動條；而用scroll則無論如何都會出現橫豎滾動條。一般用auto會比較美觀）COLOR: #006600;框內文字顏色（當然這是默認值，如果文本設置了其他顏色則會顯示相應的顏色）BACKGROUND-COLOR: #ccffcc;背景色,如果要用透明背景就不寫這一句SCROLLBAR-FACE-COLOR: #006600;滾動條中間可以拉的部分和箭頭旁邊部分的顏色SCROLLBAR-TRACK-COLOR: #00FFFF;滾動條中間可以拉的部分以外的顏色SCROLLBAR-ARROW-COLOR: #33cc33;箭頭部分的顏色SCROLLBAR-HIGHLIGHT-COLOR: #33cc33;豎滾動條左側邊框和橫滾動條上側的顏色（用於顯示立體之用）SCROLLBAR-3DLIGHT-COLOR: #33cc33;豎滾動條左側邊框和橫滾動條上側的顏色（用於顯示立體之用）SCROLLBAR-SHADOW-COLOR: #33cc33;豎滾動條右側邊框和橫滾動條下側的顏色（用於顯示陰影之用）SCROLLBAR-DARKSHADOW-COLOR: #33cc33;豎滾動條右側邊框和橫滾動條下側的顏色（用於顯示陰影之用）BORDER-TOP: black 2px solid;表示文本框的上邊框的顏色，（可用16進位數值表示）、粗細和狀態（solid表示實線，可選的值有dashed表示虛線，double表示雙線（如 black double;），outset表示外凸）。還有可以直接使用 border: red solid 2px 來整體定義邊框。BORDER-BOTTOM: black 2px solid;表示文本框的下邊框的顏色，其它同上BORDER-LEFT: black 2px solid;表示文本框的左邊框的顏色，其它同上BORDER-RIGHT: black 2px solid"表示文本框的右邊框的顏色，其它同上align=center>文本框中文字的對齊方式，可用center/left/right分別對應中/左/右<DIV><FONT color=#000000>文字內容特定框中文字顏色與文字內容DIRECTION: rtl;SCROLLBAR-3DLIGHT前加入時軸居左DIRECTION: ltr;軸居左的同時加入此代碼，文字內容方向ltr（默認，從左向右）、rtl（從右向左）。如：<DIV style="DIRECTION: ltr; FONT-SIZE: 12px">文字OVERFLOW-X: Hidden;強制隱藏X軸滾動條OVERFLOW-Y: Hidden;強制隱藏Y軸滾動條插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片插入文字或者圖片基本代碼:<DIV align= ><DIV style="color: red; background-color: 000000; border:000000 solid 1px; width: 290px; height: 325px; overflow: scroll; scrollbar-face-color:red; scrollbar-highlight-color:000000; scrollbar-3dlight-color:000000; scrollbar-darkshadow-color:000000; scrollbar-shadow-color:000000; scrollbar-arrow-color:000000; scrollbar-track-color:000000;">插入文字或者圖片<br>插入文字或者圖片<br>插入文字或者圖片<br>插入文字或者圖片<br></DIV></DIV>代碼說明:scrollbar-arrow-color:上下按鈕上三角箭頭的顏色scrollbar-base-color:滾動條的基本顏色scrollbar-darkshadow-color:滾動條強陰影的顏色scrollbar-3dlight-color:滾動條凸出部分的顏色scrollbar-highlight-color:滾動條空白部分的顏色scrollbar-shadow-color:立體滾動條陰影的顏色scrollbar-track-color:滾沒有其他「雜碎」的滾動條輸入你的內容輸入你的內容輸入你的內容輸入你的內容輸入你的內容輸入你的內容代碼：<DIV style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 150px" align=center><P>輸入你的內容</P><P>輸入你的內容</P><P>輸入你的內容</P><P>輸入你的內容</P><P>輸入你的內容</P><P>輸入你的內容</P></DIV>以下是多款滾動條代碼：文章內容代碼1：<DIV align=center><DIV style="color: blue; background-color: white; border: green solid 1px; width: 420px; height: 100px;overflow: scroll; scrollbar-face-color: #ABCDEF; scrollbar-shadow-color: #6666FF; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #6666FF; scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #99CCFF; scrollbar-arrow-color: #99CCFF;">文章內容</DIV></DIV>文字代碼2：<DIV align=center><P align=center><FONT color=#cc9999 size=3><STRONG></STRONG></FONT></P><DIV align=center><DIV style="BORDER-RIGHT: 6px ridge; BORDER-TOP: 6px ridge; SCROLLBAR-FACE-COLOR: #ccccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; OVERFLOW: scroll; BORDER-LEFT: 6px ridge; WIDTH: 329px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffccff; SCROLLBAR-ARROW-COLOR: #ffccff; BORDER-BOTTOM: 6px ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffcccc; HEIGHT: 114px; BACKGROUND-COLOR: #ffe4c4" align=center><P align=left><FONT color=#8000ff>文字</FONT></P></DIV></DIV></DIV>日誌文字代碼3：<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 236px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 113px; BACKGROUND-COLOR: #fffacd" align=center>日誌文字</DIV>日誌文字代碼4：<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffc0cb; SCROLLBAR-HIGHLIGHT-COLOR: #98fb98; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 470px; SCROLLBAR-SHADOW-COLOR: #ffb6c1; COLOR: #990099; SCROLLBAR-3DLIGHT-COLOR: #ffb6c1; SCROLLBAR-ARROW-COLOR: #f5deb3; SCROLLBAR-TRACK-COLOR: #ffdead; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #90ee90; HEIGHT: 180px; BACKGROUND-COLOR: #ffffe0" align=center>日誌文字</DIV>文字代碼5：<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 312px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 76px; BACKGROUND-COLOR: #ffffcc" align=center><DIV align=left><SPAN></SPAN>&nbsp;文字</DIV></DIV>文字代碼6：<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center><DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV></DIV>文字代碼7：<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ff99cc; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff99cc; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ff99cc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffccff; HEIGHT: 111px; BACKGROUND-COLOR: #ffccff" align=center><DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff>&nbsp;文字</FONT></DIV></DIV>文字代碼8：<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcccc; SCROLLBAR-HIGHLIGHT-COLOR: #ff9999; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #ff9999; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ffcccc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 88px; BACKGROUND-COLOR: #ffcccc" align=center><DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699>&nbsp;文字</FONT></DIV></DIV>粉色透明效果滾動框代碼9：<DIV style="BORDER-RIGHT: #f0b4b4 solid; BORDER-TOP: #f0b4b4 solid; SCROLLBAR-FACE-COLOR: #f0b4b4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0b4b4 solid; WIDTH: 316px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0b4b4 solid; SCROLLBAR-DARKSHADOW-COLOR: #f0b4b4; HEIGHT: 143px; BACKGROUND-COLOR: #ffe1f0" align=center><P align=left><FONT color=#9900cc>粉色透明效果滾動框</FONT></P><P align=left>&nbsp;</P></DIV></DIV>文字代碼10：<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 111px; BACKGROUND-COLOR: #ffcc99" align=center><DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300>&nbsp;文字</FONT></DIV></DIV>這裡為文字輸入區這裡為文字輸入區這裡為文字輸入區這裡為文字輸入區這裡為文字輸入區代碼11：<DIV align=center><DIV style="BORDER-RIGHT: #ffccff 1px dotted; BORDER-TOP: #ffccff 1px dotted; SCROLLBAR-HIGHLIGHT-COLOR: #f5d8f5; OVERFLOW: auto; BORDER-LEFT: #ffccff 1px dotted; WIDTH: 28.26%; SCROLLBAR-SHADOW-COLOR: #e5c8e5; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 15px; SCROLLBAR-TRACK-COLOR: #ffefff; BORDER-BOTTOM: #ffccff 1px dotted; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ff66ff; HEIGHT: 100px"><BR><DIV>&nbsp;這裡為文字輸入區<BR>&nbsp;這裡為文字輸入區<BR>&nbsp;這裡為文字輸入區<BR>&nbsp;這裡為文字輸入區<BR>&nbsp;這裡為文字輸入區<BR><BR><BR></DIV></DIV></DIV>左側滾動條：這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。這是一個左側滾動條。代碼：<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 377px; DIRECTION: rtl; BORDER-BOTTOM: 1px solid; HEIGHT: 100px"><DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px" align=left><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P><P>　　這是一個左側滾動條。</P></DIV></DIV>更多滾動條樣式點擊：滾動條樣式大全配色辭典

http://jxry988.360doc.com 吉祥如意988-360doc個人圖書館
推薦閱讀：