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 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/no04.htm
捲轴顏色编辑器http://wao317./317/layout.php
自动捲轴配色编码器【 颜色代码 】在线汇总
捲轴顏色生成器http://hw-driver-bal.: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>