查看: 1939|回复: 0

[教程] 中画网各种滚动条演示与代码

[复制链接]

签到天数: 13 天

[LV.3]偶尔看看II

鲜花(0) 鸡蛋(0)
发表于 2007-11-27 09:32 | 显示全部楼层 |阅读模式

中画网各种滚动条演示与代码

各种滚动条演示与代码:

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-colorDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-colorDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCFF00; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#CCFF00; scrollbar-shadow-color:#CCFF00">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#000000; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#0000FF; scrollbar-arrow-color:white; scrollbar-track-color:white; scrollbar-darkshadow-color:#0000FF; scrollbar-face-color:#0000FF; scrollbar-highlight-color:white; scrollbar-shadow-color:white">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #A864A8; scrollbar-shadow-color: #A864A8; scrollbar-arrow-color: #A864A8; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #FF0000; scrollbar-shadow-color: #FF0000; scrollbar-arrow-color: #FF0000; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #FFAE5A; scrollbar-shadow-color: #FFAE5A; scrollbar-arrow-color: #FFAE5A; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #CCCCCC; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #CCCCCC; scrollbar-shadow-color: #CCCCCC; scrollbar-arrow-color: #CCCCCC; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #000000; scrollbar-shadow-color: #000000; scrollbar-arrow-color: #000000; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #F765AD; scrollbar-shadow-color: #F765AD; scrollbar-arrow-color: #F765AD; scrollbar-face-color: #FBDBE9; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #F765AD; scrollbar-shadow-color: #F765AD; scrollbar-arrow-color: #F765AD; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #009AFF; scrollbar-shadow-color: #009AFF; scrollbar-arrow-color: #009AFF; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#00BEF7; scrollbar-face-color:#E6FAFF; scrollbar-shadow-color:#00BEF7; scrollbar-darkshadow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#00BEF7">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#B58E63; scrollbar-face-color:#F2ECE6; scrollbar-shadow-color:#B58E63; scrollbar-darkshadow-color:white; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#B58E63">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFEEAA; scrollbar-shadow-color:#FFF0AC; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFCC00; scrollbar-darkshadow-color:#EABB00; scrollbar-track-color:#FFF9E1; scrollbar-arrow-color:#ED8E0E">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#0071BD; scrollbar-face-color:#E8F5FF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#0071BD; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#0071BD">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#0071BD; scrollbar-face-color:#E8F5FF; scrollbar-shadow-color:#0071BD; scrollbar-darkshadow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-arrow-color:#0071BD">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-highlight-color: #ACD373; scrollbar-shadow-color: #ACD373; scrollbar-arrow-color: #ACD373; scrollbar-face-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF">
这里输入内容
</div>
 

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>
 

 

属性设置:

WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度.

OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为:auto(需要时才显示)
BACKGROUND-COLOR: transparent; 滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.
 
下面两个演示为设置为:auto时的界面
<div style="WIDTH: 298; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: auto; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #F2F2F2; scrollbar-shadow-color: #999CC; scrollbar-darkshadow-color: #F2F2F2; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #9999CC">
这里输入内容
</div>
 

12345678901234567890123456789012345678901234567890

如果文字或框架内的内容宽度超过框架的宽度时,将自动显示横向滚动条.

color: #FFFFFF; 滚动条各个部位的颜色设置.可以根据自己界面的需求设置颜色.
 
透明滚动条的设置:如下滚动条框架
<div style="WIDTH: 298px; HEIGHT: 146px; BACKGROUND-COLOR: #ffffff; OVERFLOW: auto; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966;SCROLLBAR-DARKSHADOW-COLOR: #ffffff;">
这里输入内容
</div>
 

 

<div style="WIDTH: 298px; HEIGHT: 146px; BACKGROUND-COLOR: #FCFCE0; OVERFLOW: auto; SCROLLBAR-FACE-COLOR: #FCFCE0; SCROLLBAR-HIGHLIGHT-COLOR: #FCFCE0; SCROLLBAR-SHADOW-COLOR: #FCFCE0; SCROLLBAR-3DLIGHT-COLOR: #FCFCE0; SCROLLBAR-ARROW-COLOR: #ff9966;SCROLLBAR-DARKSHADOW-COLOR: #FCFCE0;">
这里输入内容
</div>
 

 

设置为透明滚动条很简单. 就是除了SCROLLBAR-ARROW-COLOR之外,其他部分的颜色都设置为背景颜色.
 
使用背景图片:使用不滚动的背景图片也很简单.利用设置了背景图片的<table>,
<table>内使用滚动条框架就可以.
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="300" id="AutoNumber5" height="200" background="http://v6.jhcm.com/textbook/matter/bg2/121.gif">
<tr>
<td width="100%">
<div style="WIDTH: 298; HEIGHT: 198; BACKGROUND-COLOR: transparent; OVERFLOW: auto; scrollbar-face-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #F2F2F2; scrollbar-shadow-color: #999CC; scrollbar-darkshadow-color: #F2F2F2; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #9999CC">
这里输入内容
</div>
</td>
</tr>
</table>
 

返回列表 发新帖
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

网站地图|小黑屋|Archiver|中画网 ( 蜀ICP备11021737号-2 )|网站地图

GMT+8, 2024-11-14 23:13 , Processed in 0.060016 second(s), 9 queries , MemCached On.

上网要文明 发言要理性

Powered by Discuz! © 2008-2023 YinHuaBBS.CN

快速回复 返回顶部 返回列表