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

金秋时空

收获的季节

 
 
 

日志

 
 

博客编程之滚动条代码(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> 

 

最後介紹八度經常用的「簡化版文本滾動框」,去掉了上面的那些複雜語句,就可以