金庸群侠传x炼狱难度:博客编程---滚动条代码1(2)

来源：百度文库编辑：九乡新闻网时间：2024/05/01 00:59:10

',1)">

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

详细的教程说明：
把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片，而且文本框的大小可以随意调整。
具体效果看以下示例：

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;
'>日志文字

代码实现的文本框是浅黄色的背景，粗略效果如文本框内所示。
（注释：附语法语句的解释：
//层开始标记，对中对齐
:

//样式如下：
: 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;
//在这个层中显示文字“日志文字”，层结束标志
: '>日志文字

另附各句的语法解释：
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: 应不同的色彩值。
附八度的教学如下：
文本滾動框的源代碼：

--------------------------------------置中;

test日誌內容test

最後介紹八度經常用的「簡化版文本滾動框」，去掉了上面的那些複雜語句，就可以簡簡單單的一個框框免除過多的花巧：

test日誌內容test

最後特別注意兩點：
1. 語句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替，但效果會差一截，大家吃飽飯沒事做可以試試看！
然而其他教程中的文本滾動框都是用OVERFLOW: scroll;的，八度推介還是用OVERFLOW: auto;比較好...

2. 還有OVERFLOW-X: Hidden;是強制隱藏X軸滾動條的，如果要隱藏Y怎麼辦呢？就用OVERFLOW-Y: Hidden咯！
代码：

文字

代码：

日志文字

代码：

日志文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

粉色透明效果滚动框

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

日志文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

文字

简单透明滚动框代码：

文字

语法为一句代码：

透明滚动框代码：

文字

全透明滚动框代码：

文字

白底滚动框代码：

白底滚动框

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

文字

代码如下：

文字

——雁飞墨行编辑
代码：

文字

代码：

文字

代码：

文字

代码：

文字

代码：

博客编程---滚动条代码1(2) 博客编程------滚动代码1(1) 博客日志滚动条代码网易博客代码（日志滚动条）博客日志的滚动条代码滚动条代码日志滚动条代码滚动条精选&代码 - 日志滚动条代码滚动条代码 - 闲散人也的日志 - 网易博客新浪博客加入滚动新闻代码1 博客代码(滚动文字) [转载]日志滚动条代码滚动拉条代码00 网易博客代码.Gif动画图片+漂浮文字+滚动+音乐播放的导航条代码网易博客代码(二十)(日志滚动条I) - 谜的日志 - 网易博客引用各种滚动条及代码【引用】滚动条框样式与代码滚动条框制作方法与代码 7款滚动条精选代码新浪博客加入滚动新闻代码滚动文字特效代码大全2 边框，滚动文字代码2 文字向上滚动代码1