滚动条制作效果代码

第一步：先输入单边框如下代码

<TBODY>

<TR>

<TR>

<P>加入如下代码</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TR></TBODY></TABLE>

第二步：在加入如下代码中输入如下代码任意伸拉大小即可

<DIV style="SCROLLBAR-ARROW-COLOR: #f765ad; SCROLLBAR-FACE-COLOR: #fbdbe9; BACKGROUND-COLOR: transparent; WIDTH: 148px; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 146px; SCROLLBAR-HIGHLIGHT-COLOR: #f765ad; SCROLLBAR-SHADOW-COLOR: #f765ad; OVERFLOW: scroll; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff">这里输入内容 </DIV>

更多下拉框代码可参考教程：

各种滚动条演示与代码（二）

这种边框的容量大，而且方便，所以我的首页都是用这类边框，

我会以最方便的方法，给你介绍各类边框，希望你和我一样喜欢

滚动条制作效果代码

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color

DD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color

DD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">

这里输入内容

</div>

这里输入内容

</div>

这里输入内容

</div>

以上边框代码在边框内，喜欢哪款就复制那款内的代码使用

注：

透明滚动条的设置说明：如下滚动条框架

这里输入内容

</div>

这里输入内容

</div>

一、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（从右向左）。

滚动条示范效果图及代码

插入文字或者图片

链接的滚动条代码：

<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 2px solid;

SCROLLBAR-FACE-COLOR: red;

SCROLLBAR-HIGHLIGHT-COLOR: #FFFF00; OVERFLOW: scroll;

BORDER-LEFT: 2px solid; WIDTH: 290px;

SCROLLBAR-SHADOW-COLOR: #FFCC00; COLOR: red;

SCROLLBAR-3DLIGHT-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: #000000;

SCROLLBAR-TRACK-COLOR: #FF9900; BORDER-BOTTOM: 1px solid;

SCROLLBAR-DARKSHADOW-COLOR: #FF33FF; HEIGHT: 325px;

BACKGROUND-COLOR: #336699">

<A href="网址链接" target=_blank><FONT face=华文新魏 color=#FF0000 size=4>插入文字或者图片<BR>

<A href="网址链接" target=_blank><FONT face=华文新魏 color=#FF0000 size=4>插入文字或者图片<BR> <A href="网址链接" target=_blank><FONT face=华文新魏 color=#FF0000 size=4>插入文字或者图片<BR> <A href="网址链接" target=_blank><FONT face=华文新魏 color=#FF0000 size=4>插入文字或者图片<BR> <A href="网址链接" target=_blank><FONT face=华文新魏 color=#FF0000 size=4>插入文字或者图片<BR></DIV><DIV></DIV>

基本代码说明：

BORDER-RIGHT: 右、BORDER-TOP:上、BORDER-LEFT:左、

BORDER-BOTTOM:下、分别为滚动条外框的右、上、左、下各框边的宽度

BACKGROUND-COLOR: 为滚动条框内的背景颜色

SCROLLBAR-HIGHLIGHT-COLOR: 滚动条凸出部分上边的颜色

SCROLLBAR-SHADOW-COLOR: 横拉条三角箭头的颜色

SCROLLBAR-3DLIGHT-COLOR: 滚动条凸出部分下边的颜色

SCROLLBAR-ARROW-COLOR: 竖拉条三角箭头的颜色

SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色

SCROLLBAR-DARKSHADOW-COLOR: 滚动条三角及拉块右下侧边的颜色

WIDTH: 290px;、 HEIGHT: 325px; 滚动条框的宽和高

代码：

代码：

代码：

代码：

代码：

<P align=center><STRONG><FONT color=#009933>游侠电脑博客欢迎您的到来</FONT></STRONG></P>

<TBODY>

<TR>

<TD>

<TABLE>

<TBODY>

<TR>

代码：

<P><STRONG><FONT color=#009933>游侠电脑博客欢迎您的到来</FONT></STRONG></P></DIV></DIV></DIV>

代码：

<P align=center><STRONG><FONT color=#009933>游侠电脑博客欢迎您的到来</FONT></STRONG></P></DIV></DIV>

代码：

代码： <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 236px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 113px; BACKGROUND-COLOR: #fffacd" align=center>日

文字

代码：

代码：

<P align=left><FONT color=#9900cc>粉色透明效果滚动框

代码：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

内容1 游侠电脑博客内容2

代码：

<TBODY>

<TR>

<TD bgColor=#3cb371 height=30 borderColorLight=#363636 width=393 borderColorDark=#eeeeee align=middle><A href="http://内容链接地址1/" target=_blank><FONT color=#ffffff>内容1</FONT></A>         <A href="http://blog.sina.com.cn/u/1730409803" target=_blank><FONT color=#ffffff>游侠电脑博客</FONT></A>         <A href="http://内容链接地址2/" target=_blank><FONT color=#ffffff>内容2</FONT></A></TD></TR></TBODY></TABLE>

带标题栏滚动条式表格

<TBODY>

<TR>

<TD bgColor=#00b050 height=30 align=middle><FONT color=#ffff00><STRONG>带标题栏滚动条式表格</STRONG></FONT></TD>

<TR>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。