插入滚动条的方法及代码

插入滚动条的方法及代码

(上下拖动右侧的滚动条看看)

效果1: 

 

博客实用代码、工具、表格--精选【原】

博客制作精美图片--精选(欢迎分享)【原】

管理员回贴图片---(记忆收藏)【原】

圈子管理---管理员篇【原】

走进计算机教学与新课改【原】

计算机中数的表示【原】

计算机基本常识【原】

教育来自细节【原】

我从教计算机学科的一些体会【原】

我对计算机辅助教育教学的一些看法【原】

创新探索能力的培养【原】

《计算机的基本操作》说课教案【原】

浅谈计算机教学方法【原】

计算机课堂教学原则初探【原】

Flash制作选择题模板【原】

信息技术课的评价性策略(论文)【原】

教育随想【原】

教师语录【原】

简单制作网页【原】

PowerPoint建立动画 教学设计【原】

信息技术在小学课堂教学中的误区【原】

《图形的修改》一课的教学构思与反思【原】

简单的改变 意外的收获【原】

网络环境下研究性教学的设计【原】

显示器日常维护之我见【原】

博客与教育教学之我见【原】

对小学信息技术课堂教学的几点思考【原】

插入艺术字【原】

信息的各种心态及其本质含义【原】

点击此处查看更多内容......

效果2:

山野幽居

曾经沧海...

三国缩写

别忘了——你的世界我曾经来过

七夕的由来和传说

8个最残忍的笑话

一道终身受用的测试题

别让深爱你的人受伤

蜘蛛与甘露的故事

天底下最悲壮的事(笑暴你)

这是谁家倒霉孩子

写在敬老院墙上的话

《疯娘》转载（如果你看了，请你看完）

芙蓉姐姐和魔镜

一碗羊汤面

测试一下你的眼力

相濡以沫,不如相忘于江湖

男人的一生

给欲望设定底线

爱的最高境界

落花无言，人淡如菊

留住的叫幸福，流逝的叫遗憾

短篇经典鬼故事

大学流传最广的一封情书

KTV省钱技巧

王重阳追悼会上的屁声

星空与星座（图）

听说猪肉涨价之后

如果是你,你会等吗...

QQ空间工具、技巧

结婚前后

弟弟

十倍的侮辱等于尊重?

经得起风雨,却经不起平凡

 

---

 

 怎么样,动心了吗?那么我们来看看代码吧:

 通用代码:

 

一.右侧滚动条代码:

<DIV align=center>
<DIV style='color: blue; background-color: white; border: green solid 1px; width: 420px;

height: 100px;
overflow: scroll;
scrollbar-face-color:#90d8b4;
scrollbar-highlight-color:#fcfcb4;
scrollbar-3dlight-color:#00fcb4;
scrollbar-darkshadow-color:#4890db;
scrollbar-Shadow-color:#00fcfc;
scrollbar-arrow-color:#fc9090;
scrollbar-track-color:#d8fcfc;'>
日志图文内容
</DIV></DIV>

代码解释：
按照顺序：color--文字颜色， background--背景颜色， border:－－边框颜色
solid--实线 1px--实线大小   width--框长   height--框高
overflow--插入滚动条（PS:在后面加上 overflow-x:hidden;（隐藏左右）或Overflow-y:hidden; （隐藏上下）
下面一大部分scroll-...，全是对滚动条颜色的设置，具体做法：http:///cdh/no04.htm
http:///bca9
或者百度，GOOGLE搜索，网页滚动条之类的关键字，就会出现一些软件，下载后设置滚动条，生成相应的代码后复制代替上面代码金黄色区域即可。

二.左侧滚动条代码:

<DIV align=center>
<DIV style="BORDER: black solid 1px; OVERFLOW: auto; WIDTH: 420px; HEIGHT: 100px;

DIRECTION: rtl" >
<DIV style="DIRECTION: ltr;" align=left>
日志图文内容
</DIV></DIV></DIV> 

 

---

 

代码解释：
Direction: rtl —— 是将滚动条放置到左边的关键
Direction: ltr —— 是确保文字输入方式还是从左到右
其中滚动条样式、颜色都使用了默认值，所以这个例子除了将滚动条放置到了左侧以外，基本可以说是采用了最简单的滚动条语句。
其他具体改法，参照第一例的解释

 

---

 

 

三.透明滚动条代码：

<DIV align=center>
<DIV style='color: navy; background-color: pink; border: orange solid 1px; width: 420px;

height: 100px;
overflow: auto; scrollbar-face-color: pink; scrollbar-shadow-color: pink; scrollbar-

highlight-color: pink; scrollbar-3dlight-color: pink;  scrollbar-darkshadow-color: pink;

scrollbar-track-color: pink; scrollbar-arrow-color: navy;'>
日志图文内容
</DIV></DIV> 

代码解释：

    其实很简单，就是把所以滚动条的颜色都设成和背景色一样，比如这个例子中的 Pink。只保留Scrollbar-arrow-color 为不同于背景色的颜色，比如例子中的Navy。这样用鼠标点击两个向上、向下的小箭头即可滚动图文框中的内容。
     如需修改，参照第一例的解释。

 

---

 

 

代码说明：
SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR:

 

---

 

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

 

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

设置为透明滚动条很简单. 就是除了SCROLLBAR-ARROW-COLOR之外

使用背景图片：使用不滚动的背景图片也很简单.

利用设置了背景图片的<table>,
在<table>内使用滚动条框架就可以.

---

 

 

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

 

---

 

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容这里输入内容

---

各位朋友。你可以直接复制这个滚动框到你的日志编辑页面，调节滚动框的大小，

属性设置：  WIDTH: 148;HEIGHT: 146;  根据使用的位置,可调整宽度和高度.  OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为：auto(需要时才显示) BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.