滚动条大全（三）

 

透明滚动框代码：

 

文字

  

 

全透明滚动框代码：

文字

 

 

 白底滚动框代码：

 白底滚动框

 

 

滚动框加背景代码： 文字

 

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

文字

 

  

代码如下：

文字

 

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

 

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

 

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

1,基本捲轴HTML语法： 编辑文字图片内容 用法: (替换语法时，注意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 )， 情况如下: 编辑文字图片内容 加入后，切换编辑列上""(?点我)两次后，在回到"模式"(?点我)中就会见到，( 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 捲轴顏色產生器编辑完成后会得到如下语法: 复製以上所需要反黄部份，此反黄部份为捲轴变色的语法。在基础语法(见上面1.基本捲轴)中，在style="__"中，在__的地方加入反白部份。注意，每一部分用"分号 ;"隔开，接著空一格。得到的结果如下(加入的语法为画底线): HTML语法： 编辑文字图片内容 用法:    ■( 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语法: 编辑文字图片内容 2.隐形的捲轴(只看的见按钮箭头▲▼) HTML语法: 编辑文字图片内容 3.透明的捲轴 HTML语法: 编辑文字图片内容 4.发光的捲轴 HTML语法: 编辑文字图片内容 5.加上背景的捲轴 ★背景不跟捲轴移动 HTML语法: 编辑文字图片内容 ★背景跟卷轴移动 HTML语法: 编辑文字图片内容