注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

金秋时空

收获的季节

 
 
 

日志

 
 

博客编程之滚动条代码(1)  

2015-03-03 23:04:22|  分类: 资料 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自云雾青山《博客编程之滚动条代码(1)》

 
    博 客 编 程
                    ——滚动条代码(1)

详细的教程说明:

 

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

具体效果看以下示例:

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

 

另附各句的语法解释:

 

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>

 

代码:

<DIV style="BORDER-RIGHT: #f0c378 2pt dashed; BORDER-TOP: #f0c378 2pt dashed; SCROLLBAR-FACE-COLOR: #ffffb4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0c378 2pt dashed; WIDTH: 347px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0c378 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #999999; HEIGHT: 125px; BACKGROUND-COLOR: #ffffb4">
<P><FONT color=#ff9966>日志文字</FONT></P></DIV>

 

代码:
<DIV style="BORDER-RIGHT: #9966ff 2px solid; BORDER-TOP: #9966ff 2px solid; SCROLLBAR-FACE-COLOR: #9999ff; SCROLLBAR-HIGHLIGHT-COLOR: #9966ff; OVERFLOW: scroll; BORDER-LEFT: #9966ff 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #9966ff; COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #9999ff; SCROLLBAR-ARROW-COLOR: #6633ff; BORDER-BOTTOM: #9966ff 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #9999ff; HEIGHT: 111px; BACKGROUND-COLOR: #9999ff" align=center></DIV>

  

代码:

<DIV style="BORDER-RIGHT: #99ff99 3px dashed; BORDER-TOP: #99ff99 3px dashed; SCROLLBAR-FACE-COLOR: #99ff99; SCROLLBAR-HIGHLIGHT-COLOR: #99ff99; OVERFLOW: scroll; BORDER-LEFT: #99ff99 3px dashed; WIDTH: 64.47%; COLOR: #99ff99; BORDER-BOTTOM: #99ff99 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #00cc33; HEIGHT: 91px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=left>文字</P></DIV>

 

代码:

<DIV style="BORDER-RIGHT: #e08caa 3px dashed; BORDER-TOP: #e08caa 3px dashed; SCROLLBAR-FACE-COLOR: white; SCROLLBAR-HIGHLIGHT-COLOR: #e08caa; OVERFLOW: scroll; BORDER-LEFT: #e08caa 3px dashed; WIDTH: 362px; COLOR: #e08caa; BORDER-BOTTOM: #e08caa 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #c850ff; HEIGHT: 55px; BACKGROUND-COLOR: #ffffff" align=left>
<P align=left>文字</P></DIV>

 

代码:

<DIV style="BORDER-RIGHT: #ffccff 3px dashed; BORDER-TOP: #ffccff 3px dashed; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffccff; OVERFLOW: scroll; BORDER-LEFT: #ffccff 3px dashed; WIDTH: 70.08%; COLOR: #ffff66; BORDER-BOTTOM: #ffccff 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffff66; HEIGHT: 51px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=center>文字</P></FONT></DIV>

 

代码:

<DIV style="BORDER-RIGHT: #d5aa55 3px dashed; BORDER-TOP: #d5aa55 3px dashed; SCROLLBAR-FACE-COLOR: white; SCROLLBAR-HIGHLIGHT-COLOR: #d5aa55; OVERFLOW: scroll; BORDER-LEFT: #d5aa55 3px dashed; WIDTH: 364px; COLOR: #d5aa55; BORDER-BOTTOM: #d5aa55 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #80ff00; HEIGHT: 57px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=center>文字</P></DIV>

 

代码:
<DIV style="BORDER-RIGHT: #2d0f00 2pt dashed; BORDER-TOP: #2d0f00 2pt dashed; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #2d0f00 2pt dashed; WIDTH: 256px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #c3c3b4; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: #2d0f00 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #c3c3b4; HEIGHT: 67px; BACKGROUND-COLOR: #c3c3b4; SCROLLBAR-: #c3c3b4"></DIV>

 

代码:

<DIV style="BORDER-RIGHT: #cccc66 3px dashed; BORDER-TOP: #cccc66 3px dashed; SCROLLBAR-FACE-COLOR: #cccc66; SCROLLBAR-HIGHLIGHT-COLOR: #cccc66; OVERFLOW: scroll; BORDER-LEFT: #cccc66 3px dashed; WIDTH: 70.14%; COLOR: #ffff66; BORDER-BOTTOM: #cccc66 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffff66; HEIGHT: 57px; BACKGROUND-COLOR: #ffffff" align=center>
<P><FONT color=#cc9933>文字</FONT></P></DIV>

 

代码:
<DIV style="BORDER-RIGHT: #d2d2f0 2px dashed; BORDER-TOP: #d2d2f0 2px dashed; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #d2d2f0 2px dashed; WIDTH: 321px; SCROLLBAR-SHADOW-COLOR: #c3e1f0; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #d2d2f0 2px dashed; SCROLLBAR-DARKSHADOW-COLOR: #d2d2f0; HEIGHT: 70px; BACKGROUND-COLOR: #c3e1f0; SCROLLBAR-: #c3e1f0" align=left></DIV>

 

代码:

<DIV style="BORDER-RIGHT: #da70d6 1px dashed; BORDER-TOP: #da70d6 1px dashed; SCROLLBAR-FACE-COLOR: #da70d6; SCROLLBAR-HIGHLIGHT-COLOR: #99ff99; OVERFLOW: scroll; BORDER-LEFT: #da70d6 1px dashed; WIDTH: 367px; COLOR: #99ff99; BORDER-BOTTOM: #da70d6 1px dashed; SCROLLBAR-DARKSHADOW-COLOR: #00cc33; HEIGHT: 70px; BACKGROUND-COLOR: #ffffb4" align=centre><FONT color=#8000ff>文字</FONT></DIV>

 

代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #39bed6; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 375px; SCROLLBAR-SHADOW-COLOR: #39bed6; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff" align=center></DIV>

 

代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 375px; SCROLLBAR-SHADOW-COLOR: #39bed6; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-: #39bed6; SCROLLBAR-3DLIGHT-: #3d5054; SCROLLBAR-: #85989c" align=center></DIV>

 

 代码:

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

 

简单透明滚动框代码:

<DIV style="OVERFLOW: auto; WIDTH: 362px; HEIGHT: 60px">
<P>文字</P></DIV>

 

 

语法为一句代码:

<div style="height:200px;overflow:auto">

 

 

透明滚动框代码:
 
<DIV style="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><FONT color=#8000ff>文字</FONT></DIV></DIV>
  
 

全透明滚动框代码:

<DIV style="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 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>&nbsp;白底滚动框</P></DIV>
<DIV align=left><FONT color=#6699ff></FONT>&nbsp;</DIV></FONT>

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

<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 445px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; DIRECTION: rtl; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 87px; BACKGROUND-COLOR: #fffacd">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></DIV></DIV>

 

  

代码如下:

<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 377px; DIRECTION: rtl; BORDER-BOTTOM: 1px solid; HEIGHT: 62px">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></DIV></DIV>

 

——雁飞墨行编辑

 
 代码:<DIV align=center>
<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 align=center>
<DIV style="SCROLLBAR-FACE-COLOR: #ff6600; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; WIDTH: 373px; SCROLLBAR-SHADOW-COLOR: #663333; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #663333; HEIGHT: 119px; BACKGROUND-COLOR: #000000; SCROLLBAR-3DLIGHT-: #663333" align=left>
<DIV align=left>&nbsp;</DIV></DIV></DIV>
 
 代码:<DIV align=center>
<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>
 
代码:<DIV align=center>
<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>
<DIV align=left><FONT color=#ff6633>文字</FONT></DIV></DIV></DIV>
 

代码:<DIV align=center>
<DIV style="BORDER-RIGHT: #ffffff 1px solid; SCROLLBAR-FACE-COLOR: #6495ed; SCROLLBAR-HIGHLIGHT-COLOR: #00bfff; OVERFLOW: scroll; BORDER-LEFT: #ffffff 1px solid; WIDTH: 342px; SCROLLBAR-SHADOW-COLOR: #0000ff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #0000ff; SCROLLBAR-ARROW-COLOR: #0000ff; BORDER-BOTTOM: #ffffff 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 128px" align=center>
<DIV align=center><FONT color=#999999>
<P>&nbsp;</P></FONT></DIV></DIV></DIV>

 

代码:<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 align=center>
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 262px; 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 align=left>代码:</DIV>
<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=center><FONT color=#ff0000 size=4>雁飞墨行欢迎您的到来</FONT></P></DIV></DIV>
<DIV align=left>粉色透明效果滚动框代码:</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></DIV></DIV></DIV></DIV>

雁飞墨行欢迎您!

粉色透明效果滚动框代码:
 

基本代码说明: BORDER-RIGHT: 右、BORDER-TOP:上 、BORDER-LEFT:左、 BORDER-BOTTOM:下、 分别为滚动条外框的右、上、左、下各框边的宽度 BACKGROUND-COLOR: 为滚动条框内的背景颜色 SCROLLBAR-HIGHLIGHT-COLOR: 滚动条凸出部分上边的颜色 SCROLLBAR-SHADOW-COLOR: 横拉条三角箭头的颜色 SCROLLBAR-3DLIGHT-COLOR: 滚动条凸出部分下边的颜色 SCROLLBAR-ARROW-COLOR: 竖拉条三角箭头的颜色 SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色 SCROLLBAR-DARKSHADOW-COLOR: 滚动条三角及拉块右下侧边的颜色 WIDTH: 290px;、 HEIGHT: 325px; 滚动条框的宽和高 vior=alternate width=450 border="1" align="middle">

 

浪漫人生欢迎您来本博做客欣赏      

  评论这张
 
阅读(37)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017