滚动条样式大全

滚动条样式大全   简易滚动条文本框：   <textarea>插入内容</textarea> 说明：        文本框可以自由拉宽拉长。方法是在文章编辑栏显示的文本框中单击鼠标左键，出现变形框和变形点，鼠标拖动这些点就可以拉伸文本框了。   这里输入内容 这里输入内容> 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ①DIV：未设置宽度、高度、溢出；溢出默认为可见，宽度和高度自动调整   这是测试文字 这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ②DIV：设置宽度、高度，未设置溢出；溢出默认为可见，高度设置无效并自动调整 ③DIV：设置宽度、高度，溢出为滚动；始终显示滚动条 ④DIV：设置宽度、高度，溢出为自动；根据内容多少决定是否显示滚动条   这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑤DIV：设置宽度、高度，溢出为自动，假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，适用于文字 ⑥Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，不适用于背景图片 ⑦Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式1；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果1，适用于文字和背景图片   这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑧DIV：设置宽度、高度，溢出为自动，假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，适用于文字 ⑨Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，不适用于背景图片 ⑩Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式2；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果2，适用于文字和背景图片   这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑾DIV：增加“word-break:keep-all;”属性，即可实现横向滚动条。 ⑿DIV/DIV：嵌入另外一个DIV，并且对他们设置“DIRECTION”属性，即可实现左侧滚动条。 ⒀Table/DIV/DIV：左侧真透明滚动条和背景图片的综合运用。 【HTML代码】 ② 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试 ③ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ④ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑤ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑥ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑦ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑧ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑨ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑩ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑾ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⑿ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 ⒀ 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 属性设置：WIDTH: 148;HEIGHT: 100; 根据使用的位置,可调整宽度和高度. OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为：auto(需要时才显示) BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码. 【说明】 ★ 必须在html编辑状态下编辑代码。 ★ 简单的文本框是通过DIV实现的，包含背景图片的文本框是通过将DIV嵌入到Table中实现的。 ★ 主要通过对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（从右向左）。 ---------------------------------------------------------- 另类滚动条 ------------------------------1---------------------------- 附滾動條的语法解释： 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: 应不同的色彩值。 FONT style=" ---文字格式; align=left>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%; ---放大比率; 最後特別注意兩點：1.語句中的 OVERFLOW: auto; 可以用 OVERFLOW: scroll; 代替，但效果會差一截，大家可以試試看！然而其他教程中的文本滾動框都是用 OVERFLOW: scroll; 的，推介還是用 OVERFLOW: auto; 比較好. 2.還有OVERFLOW-X: Hidden;是強制隱藏X軸滾動條的，如果要隱藏Y怎麼辦呢？就用OVERFLOW-Y: Hidden咯！ -----------------------------2----------------------------- 这里输入内容 ----------------------------3------------------------------ 这里输入内容 -----------------------------4----------------------------- 这里输入内容 ----------------------------5------------------------------ 这里输入内容 -----------------------------6----------------------------- 这里输入内容 ---------------------------7------------------------------- 这里输入内容 ---------------------------8------------------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 --------------------------9-------------------------------- 这里输入内容 --------------------------10-------------------------------- 这里输入内容 --------------------------11-------------------------------- 这里输入内容 ---------------------------12------------------------------- 这里输入内容 ---------------------------13------------------------------- 这里输入内容 -------------------------14--------------------------------- 这里输入内容 -------------------------15--------------------------------- 这里输入内容 --------------------------16-------------------------------- 这里输入内容 --------------------------17-------------------------------- 这里输入内容 -------------------------18--------------------------------- 这里输入内容 ----------------------------19------------------------------ 这里输入内容 ---------------------------20------------------------------- 这里输入内容 ---------------------------21------------------------------- 这里输入内容 ---------------------------22------------------------------- 这里输入内容 ---------------------------23------------------------------- 这里输入内容 --------------------------24-------------------------------- 这里输入内容 -----------------------------25----------------------------- 这里输入内容 --------------------------26-------------------------------- 这里输入内容 -------------------------27--------------------------------- 这里输入内容 -------------------------28--------------------------------- 这里输入内容 ----------------------------29------------------------------ 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 ---------------------------30------------------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 --------------------31----简单透明滚动框-------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 ----------------------------32------------------------------ 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 ----------------------33----全透明滚动框------------------ 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 ----------------------34-----白底滚动框---------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 --------------------------35-------------------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 -----------------------36---左侧滚动框---------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 -----------------------37-----左侧滚动框---------------------- 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容 这里输入内容