各式各样的滚动条

2009-03-12 17:42 Country Shen 阅读(844) 评论(2) 收藏举报

属性设置： WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度.

OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为：auto(需要时才显示)

BACKGROUND-COLOR: transparent;

滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC"> 这里输入内容 </div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB"> 这里输入内容 </div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF"> 这里输入内容 </div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE"> 这里输入内容 </div>	<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4"> 这里输入内容 </div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

①DIV：未设置宽度、高度、溢出；溢出默认为可见，宽度和高度自动调整

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

②DIV：设置宽度、高度，未设置溢出；溢出默认为可见，高度设置无效并自动调整

③DIV：设置宽度、高度，溢出为滚动；始终显示滚动条

④DIV：设置宽度、高度，溢出为自动；根据内容多少决定是否显示滚动条

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑤DIV：设置宽度、高度，溢出为自动，假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，适用于文字

⑥Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，不适用于背景图片

⑦Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式1；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果1，适用于文字和背景图片

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑧DIV：设置宽度、高度，溢出为自动，假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，适用于文字

⑨Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，不适用于背景图片

⑩Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式2；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果2，适用于文字和背景图片

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑾DIV：增加“word-break:keep-all;”属性，即可实现横向滚动条。

⑿DIV/DIV：嵌入另外一个DIV，并且对他们设置“DIRECTION”属性，即可实现左侧滚动条。

⒀Table/DIV/DIV：左侧真透明滚动条和背景图片的综合运用。

【HTML代码】

②

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

③

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

④

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑤

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑥

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑦

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑧

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑨

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑩

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑾

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑿

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⒀

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

　

　

【说明】

v 必须在html编辑状态下编辑代码。

v 简单的文本框是通过DIV实现的，包含背景图片的文本框是通过将DIV嵌入到Table中实现的。

v 主要通过对DIV的Style属性来控制样式，主要设置如下：

　　overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）；

　　width（宽度）：数值；

　　height（高度）：数值；

　　color（字体颜色）：色彩代码；

　　font-size（字体大小）：数值；

　　line-height（行高）：数值；

　　border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；

　　font-weight（字体粗细）：normal、bold、bolder、lighter；

　　font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；

　　background（背景颜色）：色彩代码；

　　scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码；

　　filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；

　　word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；

　　direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。

v 辅助工具

　　在线滚动条配色器：通过本工具可以方便地在线设置滚动条样式。

　　颜色采集器：通过本工具可以方便地获取屏幕显示的任何颜色.

　

另类滚动条二：

这是女巫测试后的颜色搭配，后附有详细的教程说明：

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

具体效果看以下链接：查看效果

代码实现的文本框是浅黄色的背景，粗略效果如文本框内所示。

（注释：附语法语句的解释：

//层开始标记，对中对齐
: <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>

PS：特别感谢百忙中提供我帮助帮我解惑的偶的朋友TOLLY！）

另附各句的语法解释：

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咯！

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

<DIV align=center>
<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> </P></DIV></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>

滚动框加背景代码：

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

代码如下：

——取自爬山虎，

1,基本捲轴HTML语法：
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600">编辑文字图片内容</DIV>

用法:
(替换语法时，注意中的内容，每一部分用"分号 ;"隔开，接著空一格。)
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进位顏

色码，记得要加上"#"。

PS.整段删除，背景变成透明状态。

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 )，

虚线:( dashed )，立体内凸框:(groove)，立体浮凸框: (ridge)，

双实线: (double)，凹框: ( inset)，凸框: (outset)，依框的属性可调整上下左

右使用不同属性的框。

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-FACE-COLOR: )拖曳棒与按钮表面顏色。

■( SCROLLBAR-HIGHLIGHT-COLOR: )捲轴与按钮四周内边框左上

立体亮面的顏色。

■( SCROLLBAR-SHADOW-COLOR: )捲轴与按钮四周内边框右下立

体暗面的顏色。

■( SCROLLBAR-3DLIGHT-COLOR: )捲轴与按钮四周外边边框左上

立体亮面的顏色。
■( SCROLLBAR-ARROW-COLOR: )按钮箭头▲▼顏色。

■( SCROLLBAR-TRACK-COLOR: )捲轴轨道的顏色。

■( SCROLLBAR-DARKSHADOW-COLOR: )捲轴与按钮四周外

边框右下立体暗面的顏色。

■( SCROLLBAR-BASE-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>

刷新页面返回顶部

Country Shen

各式各样的滚动条

About