滚动条大全（三）-CFANZ编程社区

透明滚动框代码：

<DIV style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: black 0px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px; BACKGROUND-COLOR: transparent">
 <DIV align=left><FONT color=#8000ff>文字</FONT></DIV></DIV>

全透明滚动框代码：

<DIV style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: 0px solid; WIDTH: 385px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 105px">
 <P>文字</P></DIV>

白底滚动框代码：

<DIV style="BORDER-RIGHT: white 2px solid; BORDER-TOP: white 2px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: white 2px solid; WIDTH: 305px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #1e90ff; BORDER-BOTTOM: white 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 252px; BACKGROUND-COLOR: #ffffff" align=left><FONT color=#6699ff>
 <P align=left> 白底滚动框</P></DIV>
 <DIV align=left><FONT color=#6699ff></FONT> </DIV></FONT>

滚动框加背景代码： <TABLE cellSpacing=0 cellPadding=0 background=http://www.urban.ne.jp/home/katoss/sozai_01_12/mozakabe6.gif border=0> <TBODY> <TR> <TD> <P> <TABLE cellSpacing=0 cellPadding=0 background=http://www.urban.ne.jp/home/katoss/sozai_01_12/mozakabe6.gif border=0> <TBODY> <TR> <TD> <DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 323px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 85px"> <P>文字</P> <P> </P></DIV></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>

左侧滚动文本框代码如下：

代码如下：

<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: 62px">
 <DIV >
 <P>文字</P></DIV></DIV>

——取自爬山虎，女巫润色

介绍几个滚动条配色网站：地址1 ；地址2 ；地址3 ；

1,基本捲轴HTML语法： <DIV style="OVERFLOW: scroll; 用法: (替换语法时，注意style=""中的内容，每一部分用"分号 ;"隔开，接著空一格。) 1.当"内容区域"大於"显示区域"时，可利用捲轴让看见超出范围的内容。利用滑 PS:去除width:10px的元素，宽会自动扩展到最大。 2.语法( OVERFLOW: scroll )为显示右方和下方捲轴。整个还可以分别替换成 ★( OVERFLOW: hidden) : 不使用捲轴。 3.语法( background-color: #996600 )为框框内的背景顏色，#996600 部分为16进位顏 2.为捲轴加外框基础语法中，在style="__"中，在__的地方加入( BORDER: #ff0000 5px dotted )，情况如下: <DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted">编辑文字图片内容</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 )都有共同结构，分析如下: ( BORDER: #ff0000 5px dotted ) ★(#ff0000)框的顏色，#996600 部分为16进位顏色码，记得要加上"#"，依框的属性上下左右可调整不同顏色。 ★(5px):框的大小,数字越大，框就越粗。0为无框。 ★(dotted):框的类型，(dotted)为"点"的型态，可替换其他的有实线:( solid )， 3.为捲轴调色: 首先取得{捲轴顏色语法}内容可以用捲轴顏色產生器取得，捲轴顏色產生器网址如下: 捲轴顏色產生器http://cdh.idv.tw/cdh/no04.htm 捲轴顏色编辑器http://wao317.sytes.net/317/layout.php 自动捲轴配色编码器http://163.22.135.131/teaching_area/Auto_scrollbar_Color.htm 捲轴顏色生成器http://hw-driver-bal.nctu.cc:52833/pub/slime/teach/Bar.htm 捲轴顏色產生器编辑完成后会得到如下语法: <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> 复製以上所需要反黄部份，此反黄部份为捲轴变色的语法。在基础语法(见上面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-DARKSHADOW-COLOR: )捲轴与按钮四周外 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>