当前位置:首页 > 开发 > Web前端 > 前端 > 正文

自定义div滚动条样式

发表于: 2009-11-26   作者:tvmovie   来源:转载   浏览:
摘要: 效果图:见附   代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>div滚动条样式</title> <meta http-equiv="Cont

效果图:见附

 

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>div滚动条样式</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>

 <body>
  <table style="BORDER-COLLAPSE: collapse" bordercolor="#c0c0c0" cellspacing="0" cellpadding="0" width="600" border="1">
                <tbody>
                    <tr>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #70807d; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #70807d; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #70807d; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-3DLIGHT-COLOR: #f2f2f2; SCROLLBAR-ARROW-COLOR: #9999cc; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #f2f2f2; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ff0033; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ff0033; SCROLLBAR-3DLIGHT-COLOR: #ff0033; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffff33; SCROLLBAR-DARKSHADOW-COLOR: #ffff33; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #eaecec; SCROLLBAR-HIGHLIGHT-COLOR: #eaecec; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: black; SCROLLBAR-3DLIGHT-COLOR: #eaecec; SCROLLBAR-ARROW-COLOR: #eaecec; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #eaecec; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                    </tr>
                    <tr>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #cfcfcf; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #595959; SCROLLBAR-3DLIGHT-COLOR: #595959; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #cfcfcf; HEIGHT: 140px">
                        <p align="left"><font style="FONT-SIZE: 9pt" face="Arial" color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140;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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></p>
                        </div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #d2e5f4; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #d2e5f4; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #d2e5f4; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #d9d9d9; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #d9d9d9; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #d9d9d9; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #59adbb; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #59adbb; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #59adbb; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                    </tr>
                    <tr>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffc300; SCROLLBAR-3DLIGHT-COLOR: #ffc300; SCROLLBAR-ARROW-COLOR: #ffc300; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ddd38d; SCROLLBAR-HIGHLIGHT-COLOR: #fff8c5; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #5a5227; SCROLLBAR-3DLIGHT-COLOR: #5a5227; SCROLLBAR-ARROW-COLOR: #fff8c5; SCROLLBAR-DARKSHADOW-COLOR: #fff8c5; SCROLLBAR-BASE-COLOR: #ddd38d; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #9ebfe8; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #9ebfe8; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #9ebfe8; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #db52bc; SCROLLBAR-HIGHLIGHT-COLOR: #e994d6; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #e994d6; SCROLLBAR-3DLIGHT-COLOR: #db52bc; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #e994d6; SCROLLBAR-DARKSHADOW-COLOR: #db52bc; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                    </tr>
                    <tr>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #333333; SCROLLBAR-HIGHLIGHT-COLOR: #666666; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: #101010; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #101010; SCROLLBAR-DARKSHADOW-COLOR: #070707; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #333333; SCROLLBAR-HIGHLIGHT-COLOR: #333333; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #808080; SCROLLBAR-3DLIGHT-COLOR: #808080; SCROLLBAR-ARROW-COLOR: #cccccc; SCROLLBAR-TRACK-COLOR: #191919; SCROLLBAR-DARKSHADOW-COLOR: #333333; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ffc4e1; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ff6ab5; SCROLLBAR-3DLIGHT-COLOR: #ff95ca; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffddee; SCROLLBAR-DARKSHADOW-COLOR: #ffb5da; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #dbebfe; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #b8d6fa; SCROLLBAR-3DLIGHT-COLOR: #dbebfe; SCROLLBAR-ARROW-COLOR: #458ce4; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #458ce4; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                    </tr>
                    <tr>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #f8ecd8; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #885c10; SCROLLBAR-3DLIGHT-COLOR: #885c10; SCROLLBAR-ARROW-COLOR: #885c10; SCROLLBAR-TRACK-COLOR: #f8ecd8; SCROLLBAR-DARKSHADOW-COLOR: #f8ecd8; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #222222; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #222222; SCROLLBAR-ARROW-COLOR: #222222; SCROLLBAR-TRACK-COLOR: #222222; SCROLLBAR-DARKSHADOW-COLOR: #222222; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                        <td width="180" height="140">
                        <div style="SCROLLBAR-FACE-COLOR: #fddee8; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; WIDTH: 180px; SCROLLBAR-SHADOW-COLOR: #fddee8; SCROLLBAR-3DLIGHT-COLOR: #fdcfdd; SCROLLBAR-ARROW-COLOR: #fea6c0; SCROLLBAR-TRACK-COLOR: #fff6f9; SCROLLBAR-DARKSHADOW-COLOR: #fdcfdd; HEIGHT: 140px; p: left&gt;&lt;FONT style=" face="Arial"><font color="#99cc00">&lt;div style=&quot;WIDTH: 120; HEIGHT: 140; 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&quot;&gt;<br />
                        文字内容<br />
                        &lt;/div&gt;</font></div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
            </td>
        </tr>
    </tbody>
</table> </body>
</html>

 

自定义div滚动条样式

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号