滚动条大全（三）

来源：互联网发布：网络错误711什么意思编辑：程序博客网时间：2024/04/30 01:42

透明滚动框代码：

<DIVstyle="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><FONTcolor=#8000ff>文字</FONT></DIV></DIV>

全透明滚动框代码：

<DIVstyle="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 2pxsolid; 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><FONTcolor=#6699ff>
<Palign=left> 白底滚动框</P></DIV>
<DIV align=left><FONTcolor=#6699ff></FONT> </DIV></FONT>

滚动框加背景代码：

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

代码如下：

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

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

附：滚动条（卷轴）语法详解

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

用法:
(替换语法时，注意style=""中的内容，每一部分用"分号;"隔开，接著空一格。)
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 5pxdotted">编辑文字图片内容</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语法:
<DIVstyle="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><TDvAlign=top align=left><DIVstyle="OVERFLOW: auto; HEIGHT:60px">编辑文字图片内容</DIV></TD></TR></TBODY></TABLE>
★背景跟卷轴移动

HTML语法:
<DIV style="OVERFLOW: auto;HEIGHT: 60px"><TABLE width="100%"background=背景图片连结><TBODY><TR><TDvAlign=topalign=left>编辑文字图片内容</TD></TR></TBODY></TABLE></DIV>

0 0