滚动条颜色更改代码 


在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咯!