（十二）用代码设置滚动条

最简单的滚动条设置 1. 带滑动条的表格 看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格<*TD>标识后加上如下代码就可以了 代码如下:  <table align=center width="260" border="0"> <tr><td bgcolor="cyan"><font color="#FFFFFF"><b>带滑动条的表格</b></font></td></tr> <tr><td bgcolor="yellow"> <div style="overflow:auto;height:80;"> 看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格<td> </div> </td> </tr> </table>   2. 带滑动条的表格 看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格 <*TD>标识后加上如下代码就可以了 代码如下: <table align=center width="260" border="0"> <tr><td bgcolor="cyan"><font color="#FFFFFF"><b>带滑动条的表格</b></font></td></tr> <tr><td bgcolor="yellow"> <div style="overflow:auto;height:80;scrollbar-base-color:red"> 看看这个效果，不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格<td>标识后加上如下代码就可以了 </div> </td> </tr> </table> 文本条代码   代码   <DIV align=center> <DIV style="BORDER-RIGHT: #ffccff 1px dotted; BORDER-TOP: #ffccff 1px dotted; SCROLLBAR-HIGHLIGHT-COLOR: #f5d8f5; OVERFLOW: auto; BORDER-LEFT: #ffccff 1px dotted; WIDTH: 67%; SCROLLBAR-SHADOW-COLOR: #e5c8e5; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 15px; SCROLLBAR-TRACK-COLOR: #ffefff; BORDER-BOTTOM: #ffccff 1px dotted; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ff66ff; HEIGHT: 100px"><BR> <DIV> 这里为文字输入区<BR> 这里为文字输入区<BR> 这里为文字输入区<BR> 这里为文字输入区<BR> 这里为文字输入区<BR><BR><BR></DIV></DIV></DIV>       代码： <DIV align=center> <P align=center><FONT color=#cc9999 size=3><STRONG></STRONG></FONT></P> <DIV align=center> <DIV style="BORDER-RIGHT: 6px ridge; BORDER-TOP: 6px ridge; SCROLLBAR-FACE-COLOR: #ccccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; OVERFLOW: scroll; BORDER-LEFT: 6px ridge; WIDTH: 329px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffccff; SCROLLBAR-ARROW-COLOR: #ffccff; BORDER-BOTTOM: 6px ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffcccc; HEIGHT: 114px; BACKGROUND-COLOR: #ffe4c4" align=center> <P align=left><FONT color=#8000ff>文字</FONT></P></DIV></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>日志文字</DIV>             代码： <DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center> <DIV align=left><FONT color=#009900></FONT> 文字</DIV></DIV></DIV>       <DIV style="BORDER-RIGHT: #c399d0 2pt dashed; BORDER-TOP: #c399d0 2pt dashed; SCROLLBAR-FACE-COLOR: #ddcae0; SCROLLBAR-HIGHLIGHT-COLOR: #c399d0; OVERFLOW: scroll; BORDER-LEFT: #c399d0 2pt dashed; WIDTH: 386px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ddcae0; SCROLLBAR-ARROW-COLOR: #c399d0; BORDER-BOTTOM: #c399d0 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ddcae0; HEIGHT: 92px; BACKGROUND-COLOR: #ddcae0" align=left><FONT color=#ff6633>文字</FONT></DIV>