最簡單的滾動條設置
1. 帶滑動條的表格
看看這個效果,不要以為是IFRAME,這可是地地道道的表格!其實,這是表格和CSS結合的效果。當網(wǎng)頁上有大段文字要顯示,而又沒有足夠的空間時,這就派上用場了。雖然用文本框也可以實現(xiàn)類似效果,但卻遠沒有用表格靈活。代碼很簡單,只要在單元格<*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結合的效果。當網(wǎng)頁上有大段文字要顯示,而又沒有足夠的空間時,這就派上用場了。雖然用文本框也可以實現(xiàn)類似效果,但卻遠沒有用表格靈活。代碼很簡單,只要在單元格<td>
</div>
</td>
</tr>
</table>
2. 帶滑動條的表格
看看這個效果,不要以為是IFRAME,這可是地地道道的表格!其實,這是表格和CSS結合的效果。當網(wǎng)頁上有大段文字要顯示,而又沒有足夠的空間時,這就派上用場了。雖然用文本框也可以實現(xiàn)類似效果,但卻遠沒有用表格靈活。代碼很簡單,只要在單元格
<*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結合的效果。當網(wǎng)頁上有大段文字要顯示,而又沒有足夠的空間時,這就派上用場了。雖然用文本框也可以實現(xiàn)類似效果,但卻遠沒有用表格靈活。代碼很簡單,只要在單元格<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> 這里為文字輸入?yún)^(qū)<BR> 這里為文字輸入?yún)^(qū)<BR> 這里為文字輸入?yún)^(qū)<BR> 這里為文字輸入?yún)^(qū)<BR> 這里為文字輸入?yún)^(qū)<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>