滚动条代码大集合

感谢:印痴 提供! 属性设置:

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>

【HTML代码】

 


<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; 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: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; 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: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw 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: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; 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: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; 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: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; 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: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw 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: 120px; 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: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>


<DIV style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>


<DIV style="DIRECTION: rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<DIV style="DIRECTION: ltr;">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>


<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="DIRECTION: rtl;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: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<DIV style="DIRECTION: ltr"><P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>

 

 

【说明】

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 辅助工具

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

  颜色采集器:通过本工具可以方便地获取屏幕显示的任何颜色。下载颜色采集器1.05

另类滚动条二:
 

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

 

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

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

<DIV align=center
style=''''
color: #990099;
background-color:#FFFFE0;
border: solid 2px black;
width: 470px;
height: 180px;
overflow: scroll;
scrollbar-face-color: #ffc0cb;
scrollbar-shadow-color: #ffb6c1;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #ffb6c1;
scrollbar-darkshadow-color: #90ee90;
scrollbar-track-color: #ffdead;
scrollbar-arrow-color: #f5deb3;
''''>日志文字</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>

      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>
<P align=center><FONT color=#cc9999 size=3><STRONG></STRONG></FONT></P>
<DIV align=center>
<DIV style="BORDER-RIGHT: 6px ridge; BORDER-TOP: 6px ridge; SCROLLBAR-FACE-COLOR: #ccccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; OVERFLOW: scroll; BORDER-LEFT: 6px ridge; WIDTH: 329px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffccff; SCROLLBAR-ARROW-COLOR: #ffccff; BORDER-BOTTOM: 6px ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffcccc; HEIGHT: 114px; BACKGROUND-COLOR: #ffe4c4" align=center>
<P align=left><FONT color=#8000ff>文字</FONT></P></DIV></DIV></DIV>

代码:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 236px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 113px; BACKGROUND-COLOR: #fffacd" align=center>日志文字</DIV>

代码:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffc0cb; SCROLLBAR-HIGHLIGHT-COLOR: #98fb98; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 470px; SCROLLBAR-SHADOW-COLOR: #ffb6c1; COLOR: #990099; SCROLLBAR-3DLIGHT-COLOR: #ffb6c1; SCROLLBAR-ARROW-COLOR: #f5deb3; SCROLLBAR-TRACK-COLOR: #ffdead; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #90ee90; HEIGHT: 180px; BACKGROUND-COLOR: #ffffe0" align=center>日志文字</DIV>

代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 312px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 76px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><SPAN></SPAN>&nbsp;文字</DIV></DIV>
代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV></DIV>
代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #66ff66; SCROLLBAR-HIGHLIGHT-COLOR: #66ff99; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #00ff00; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #66ff99; SCROLLBAR-ARROW-COLOR: #009900; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #00ff00; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>
<DIV></DIV>

代码:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 319px; BACKGROUND-COLOR: #000000">
<P><FONT color=#ff9900>文字</FONT></P></DIV></TD></TR>

代码:

 

<DIV align=center>
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 277px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 200px; BACKGROUND-COLOR: #000000" align=center>
<P align=left>文字</P></DIV></DIV>

代码:
<DIV style="SCROLLBAR-FACE-COLOR: #ff6600; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; WIDTH: 463px; SCROLLBAR-SHADOW-COLOR: #663333; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #663333; HEIGHT: 119px; BACKGROUND-COLOR: #000000; SCROLLBAR-3DLIGHT-: #663333" align=left></DIV>
代码:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcccc; SCROLLBAR-HIGHLIGHT-COLOR: #ff9999; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #ff9999; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ffcccc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 88px; BACKGROUND-COLOR: #ffcccc" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699>&nbsp;文字</FONT></DIV></DIV>
代码:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ff99cc; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff99cc; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ff99cc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffccff; HEIGHT: 111px; BACKGROUND-COLOR: #ffccff" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff>&nbsp;文字</FONT></DIV></DIV>

代码:

 

<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>&nbsp;</P></DIV></DIV>

 

代码:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 111px; BACKGROUND-COLOR: #ffcc99" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300>&nbsp;文字</FONT></DIV></DIV>

代码:

 

<DIV style="BORDER-RIGHT: #c399d0 2pt dashed; BORDER-TOP: #c399d0 2pt dashed; SCROLLBAR-FACE-COLOR: #ddcae0; SCROLLBAR-HIGHLIGHT-COLOR: #c399d0; OVERFLOW: scroll; BORDER-LEFT: #c399d0 2pt dashed; WIDTH: 386px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ddcae0; SCROLLBAR-ARROW-COLOR: #c399d0; BORDER-BOTTOM: #c399d0 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ddcae0; HEIGHT: 92px; BACKGROUND-COLOR: #ddcae0" align=left><FONT color=#ff6633>文字</FONT></DIV>

代码:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>
代码:
<DIV style="BORDER-RIGHT: #ffcc99 2px solid; BORDER-TOP: #ffcc99 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ffcc99 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ffcc99 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>

 

原文地址:http://hi.baidu.com/lenoos/blog/item/1cb6e2595df3422c2934f0e6.html

备注:转载内容只供个人收藏使用,不做其他用途

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值