滚动条颜色更改代码

滚动条颜色更改代码

在body间加入代码(格式如下):
<style type="text/css">
body {
scrollbar-face-color: #330033;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #330033;
scrollbar-arrow-color: #FFFFFF;
}
</style>


其中
Scrollbar-Face-Color为滚动条表面颜色设定；
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定；
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定；
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定；
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定；
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

透明滚动条

滚动框加背景代码：

<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: 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>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 445px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; DIRECTION: rtl; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 87px; BACKGROUND-COLOR: #fffacd">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></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: 62px">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></DIV></DIV>


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

把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片，而且文本框的大小可以随意调整。


附语法语句的解释：

//层开始标记，对中对齐
: <DIV align=center
//样式如下：
: style=`
//前景色为#ffffff
: color: #ffffff;
//背景色为#000000
: background-color: #000000;
//边框为2像素，黑色
: border: solid 2px black;
//宽度120像素
: width: 120px;
//高度200像素
: height: 200px;
//超出范围时使用滚动条
: overflow: scroll;
//滚动条的各个颜色如下
: scrollbar-face-color: #889B9F;
: scrollbar-shadow-color: #3D5054;
: scrollbar-highlight-color: #C3D6DA;
: scrollbar-3dlight-color: #3D5054;
: scrollbar-darkshadow-color: #85989C;
: scrollbar-track-color: #95A6AA;
: scrollbar-arrow-color: #FFD6DA;
//在这个层中显示文字“日志文字”，层结束标志
: `>日志文字</DIV>


另附各句的语法解释：

align=center 表示框内内容居中对齐，缺省情况下为左对齐。
background-color: transprant; 表示框内背景色为透明，需要改颜色的话，把transprant改成16进制颜色值即可。border: solid 2px black表示文本框的边线状态，solid表示实线，可选的值有dashed(虚线)，double(双线)，outset等。 2px black分别表示边线粗细和颜色，可自行调整（注：black和#000000效果一样）将文本滚动框的边框值设置为0，即border: solid 0px
width: 355px; height: 200px; 分别表示滚动文本框的宽和高。
overflow: auto;auto表示"自动"，即框内内容不需要占据height: 200px这么高的高度时，就不会出现滚动条，一旦超过了，滚动条就会出现，多出的部分通过下拉滚动条来显示，overflow也设置的值还有scroll，即强制出现滚动条，因为这样也会强制出现横向的滚动条，很难看。

后面那部分代码，就是设置滚动条的颜色状态，根据自己的需要和喜好来调整，比较有用的是scrollbar-face-color: #889B9F;这句，其他部分不改也问题不大。将有关文本滚动框的各个组成部分的色彩均设为与日志背景相同，即修改各参数的色彩值。但滚动条箭头色彩，即scrollbar-arrow-color: 应不同的色彩值。


文本滾動框的源代碼：


<DIV align=center>
--------------------------------------置中;
<FONT style="
--------------------------------------文字格式;
OVERFLOW: auto;
--------------------------------------超過範圍就自動生成滾動條;
OVERFLOW-X: Hidden;
--------------------------------------需要時才用，用來隱藏X軸滾動條的;
border: solid 2px black;
-------------------------------------邊框的格式，厚度和顏色;
background-color: #ffffee;
--------------------------------------背景色,如果要透明背景就去掉整句;
SCROLLBAR-FACE-COLOR: #0000ff;
---------------滾動條中間可以拉的部分和箭頭旁邊部分的顏色;
SCROLLBAR-TRACK-COLOR: #eeffff;
---------------滾動條中間可以拉的部分以外的顏色;
SCROLLBAR-HIGHLIGHT-COLOR: #6cb424;
---------------滾動條左側邊框的顏色（用於顯示立體之用）;
SCROLLBAR-3DLIGHT-COLOR: #fcfc48;
---------------滾動條左側邊框的顏色（用於顯示立體之用）;
SCROLLBAR-SHADOW-COLOR: #90fcfc;
---------------滾動條右側邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-DARKSHADOW-COLOR: #401687;
---------------滾動條右側邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-ARROW-COLOR: #FFFF00;
---------------箭頭部分的顏色;
ZOOM: 100%;
---------------放大比率;
HEIGHT: 105px" face="Courier New, Courier, Monospace" color=#9933cc>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
</FONT></DIV>


「簡化版文本滾動框」
去掉了上面的那些複雜語句，就可以簡簡單單的一個框框免除過多的花巧：

<DIV align=center><FONT style="FONT-SIZE: 11pt; OVERFLOW:
auto; WIDTH: 90.62%; FONT-FAMILY: times new roman;
HEIGHT: 87px" face="Courier New, Courier, Monospace" color=#9933cc>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P></FONT>
</DIV>


注意兩點：
1. 語句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替，但效果會差一截，大家吃飽飯沒事做可以試試看！
然而其他教程中的文本滾動框都是用OVERFLOW: scroll;的，還是用OVERFLOW: auto;比較好...

2. 還有OVERFLOW-X: Hidden;是強制隱藏X軸滾動條的，如果要隱藏Y怎麼辦呢？就用OVERFLOW-Y: Hidden咯！