各種滾動條演示與代碼（三）
|
|
|
<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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</div>
|
|
以上邊框代碼在邊框內(nèi)，喜歡哪款就復(fù)制那款內(nèi)的代碼使用。
|
注：
|
使用背景圖片：
使用不滾動的背景圖片也很簡單.利用設(shè)置了背景圖片的<table>,在<table>內(nèi)使用滾動條框架就可以.
|
|
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="300" height="200" background="http://v6./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">
這里輸入內(nèi)容
</div>
</td>
</tr>
</table>
|
|
附注：
一、overflow（溢出控制）：visible（默認(rèn)，可見）、auto（自動）、scroll（顯示滾動條）；
二、width（寬度）：數(shù)值、 height（高度）：數(shù)值、 color（字體顏色）：色彩代碼、 font-size（字體大?。簲?shù)值、 line-height（行高）：數(shù)值；
三、border（邊框）：寬度、類型和顏色，類型主要支持以下幾種：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
四、font-weight（字體粗細(xì)）：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=轉(zhuǎn)換成透明的顏色)（chroma過濾器）：色彩代碼，該顏色將轉(zhuǎn)換成透明效果；
七、word-break（斷字）：normal（默認(rèn)，正常斷字）、keep-all（嚴(yán)格不斷字）、break-all（嚴(yán)格斷字）；
八、direction（文字方向）：ltr（默認(rèn)，從左向右）、rtl（從右向左）。
|
