滾動(dòng)條樣式大全屬性設(shè)置: WIDTH: 148;HEIGHT: 146; 根據(jù)使用的位置,可調(diào)整寬度和高度.
OVERFLOW: scroll; 顯示縱橫滾動(dòng)條.上部的演示均屬設(shè)置為scroll的界面. 但一般都設(shè)置為:auto(需要時(shí)才顯示)
BACKGROUND-COLOR: transparent;
滾動(dòng)框內(nèi)部背景顏色.transparent為透明色.其他可使用顏色代碼.
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; 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">
這里輸入內(nèi)容
</div>
<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>
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
①DIV:未設(shè)置寬度、高度、溢出;溢出默認(rèn)為可見(jiàn),寬度和高度自動(dòng)調(diào)整
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
②DIV:設(shè)置寬度、高度,未設(shè)置溢出;溢出默認(rèn)為可見(jiàn),高度設(shè)置無(wú)效并自動(dòng)調(diào)整
③DIV:設(shè)置寬度、高度,溢出為滾動(dòng);始終顯示滾動(dòng)條
④DIV:設(shè)置寬度、高度,溢出為自動(dòng);根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑤DIV:設(shè)置寬度、高度,溢出為自動(dòng),假透明滾動(dòng)條樣式1;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用顏色實(shí)現(xiàn)假透明效果1,適用于文字
⑥Table/DIV:設(shè)置寬度、高度,溢出為自動(dòng),背景圖片、假透明滾動(dòng)條樣式1;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用顏色實(shí)現(xiàn)假透明效果1,不適用于背景圖片
⑦Table/DIV:設(shè)置寬度、高度,溢出為自動(dòng),背景圖片、真透明滾動(dòng)條樣式1;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用濾鏡實(shí)現(xiàn)真透明效果1,適用于文字和背景圖片
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑧DIV:設(shè)置寬度、高度,溢出為自動(dòng),假透明滾動(dòng)條樣式2;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用顏色實(shí)現(xiàn)假透明效果2,適用于文字
⑨Table/DIV:設(shè)置寬度、高度,溢出為自動(dòng),背景圖片、假透明滾動(dòng)條樣式2;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用顏色實(shí)現(xiàn)假透明效果2,不適用于背景圖片
⑩Table/DIV:設(shè)置寬度、高度,溢出為自動(dòng),背景圖片、真透明滾動(dòng)條樣式2;根據(jù)內(nèi)容多少?zèng)Q定是否顯示滾動(dòng)條,利用濾鏡實(shí)現(xiàn)真透明效果2,適用于文字和背景圖片
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑾DIV:增加“word-break:keep-all;”屬性,即可實(shí)現(xiàn)橫向滾動(dòng)條。
⑿DIV/DIV:嵌入另外一個(gè)DIV,并且對(duì)他們?cè)O(shè)置“DIRECTION”屬性,即可實(shí)現(xiàn)左側(cè)滾動(dòng)條。
⒀Table/DIV/DIV:左側(cè)真透明滾動(dòng)條和背景圖片的綜合運(yùn)用。
【HTML代碼】
②
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試
文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
③
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
④
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑤
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑥
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑦
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑧
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑨
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑩
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑾
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⑿
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
⒀
這是測(cè)試文字
這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字這是測(cè)試文字
【說(shuō)明】
v 必須在html編輯狀態(tài)下編輯代碼。
v 簡(jiǎn)單的文本框是通過(guò)DIV實(shí)現(xiàn)的,包含背景圖片的文本框是通過(guò)將DIV嵌入到Table中實(shí)現(xiàn)的。
v 主要通過(guò)對(duì)DIV的Style屬性來(lái)控制樣式,主要設(shè)置如下:
overflow(溢出控制):visible(默認(rèn),可見(jiàn))、auto(自動(dòng))、scroll(顯示滾動(dòng)條);
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、隸書(shū)、宋體、幼圓;
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(滾動(dòng)條各部分的顏色):色彩代碼;
filter:chroma(COLOR=轉(zhuǎn)換成透明的顏色)(chroma過(guò)濾器):色彩代碼,該顏色將轉(zhuǎn)換成透明效果;
word-break(斷字):normal(默認(rèn),正常斷字)、keep-all(嚴(yán)格不斷字)、break-all(嚴(yán)格斷字);
direction(文字方向):ltr(默認(rèn),從左向右)、rtl(從右向左)。
v 輔助工具
在線滾動(dòng)條配色器:通過(guò)本工具可以方便地在線設(shè)置滾動(dòng)條樣式。
顏色采集器:通過(guò)本工具可以方便地獲取屏幕顯示的任何顏色.
另類滾動(dòng)條二:
這是測(cè)試后的顏色搭配,后附有詳細(xì)的教程說(shuō)明:
把代碼拷貝后可直接雙擊文本框就可以在里面輸入文字和粘貼圖片,而且文本框的大小可以隨意調(diào)整。
具體效果看以下鏈接:
查看效果<DIV align=center
style=’’’’’’’’
color: #990099;
background-color:#FFFFE0;
border: solid 2px black;
width: 470px;
height: 180px;
overflow: scroll;
scrollbar-face-color: #ffc0cb;
scrollbar-shadow-color: #ffb6c1;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #ffb6c1;
scrollbar-darkshadow-color: #90ee90;
scrollbar-track-color: #ffdead;
scrollbar-arrow-color: #f5deb3;
’’’’’’’’>日志文字</DIV>
代碼實(shí)現(xiàn)的文本框是淺黃色的背景,粗略效果如文本框內(nèi)所示。
(注釋:附語(yǔ)法語(yǔ)句的解釋:
//層開(kāi)始標(biāo)記,對(duì)中對(duì)齊
: <DIV align=center
//樣式如下:
: style=’’’’’’’’
//前景色為#ffffff
: color: #ffffff;
//背景色為#000000
: background-color: #000000;
//邊框?yàn)?像素,黑色
: border: solid 2px black;
//寬度120像素
: width: 120px;
//高度200像素
: height: 200px;
//超出范圍時(shí)使用滾動(dòng)條
: overflow: scroll;
//滾動(dòng)條的各個(gè)顏色如下
: scrollbar-face-color: #889B9F;
: scrollbar-shadow-color: #3D5054;
: scrollbar-highlight-color: #C3D6DA;
: scrollbar-3dlight-color: #3D5054;
: scrollbar-darkshadow-color: #85989C;
: scrollbar-track-color: #95A6AA;
: scrollbar-arrow-color: #FFD6DA;
//在這個(gè)層中顯示文字“日志文字”,層結(jié)束標(biāo)志
: ’’’’’’’’>日志文字</DIV>
另附各句的語(yǔ)法解釋:
align=center 表示框內(nèi)內(nèi)容居中對(duì)齊,缺省情況下為左對(duì)齊。
background-color: transprant; 表示框內(nèi)背景色為透明,需要改顏色的話,把transprant改成16進(jìn)制顏色值即可。
border: solid 2px black表示文本框的邊線狀態(tài),solid表示實(shí)線,可選的值有dashed(虛線),double(雙線),outset等。 2px black分別表示邊線粗細(xì)和顏色,可自行調(diào)整(注:black和#000000效果一樣)將文本滾動(dòng)框的邊框值設(shè)置為0,即border: solid 0px
width: 355px; height: 200px; 分別表示滾動(dòng)文本框的寬和高。
overflow: auto;auto表示"自動(dòng)",即框內(nèi)內(nèi)容不需要占據(jù)height: 200px這么高的高度時(shí),就不會(huì)出現(xiàn)滾動(dòng)條,一旦超過(guò)了,滾動(dòng)條就會(huì)出現(xiàn),多出的部分通過(guò)下拉滾動(dòng)條來(lái)顯示,overflow也設(shè)置的值還有scroll,即強(qiáng)制出現(xiàn)滾動(dòng)條,因?yàn)檫@樣也會(huì)強(qiáng)制出現(xiàn)橫向的滾動(dòng)條,很難看。
后面那部分代碼,就是設(shè)置滾動(dòng)條的顏色狀態(tài),根據(jù)自己的需要和喜好來(lái)調(diào)整,比較有用的是scrollbar-face-color: #889B9F;這句,其他部分不改也問(wèn)題不大。將有關(guān)文本滾動(dòng)框的各個(gè)組成部分的色彩均設(shè)為與日志背景相同,即修改各參數(shù)的色彩值。但滾動(dòng)條箭頭色彩,即scrollbar-arrow-color: 應(yīng)不同的色彩值。
附八度的教學(xué)如下:
文本滾動(dòng)框的源代碼:
<DIV align=center>
--------------------------------------置中;
<FONT style="
--------------------------------------文字格式;
OVERFLOW: auto;
--------------------------------------超過(guò)範(fàn)圍就自動(dòng)生成滾動(dòng)條;
OVERFLOW-X: Hidden;
--------------------------------------需要時(shí)才用,用來(lái)隱藏X軸滾動(dòng)條的;
border: solid 2px black
;-------------------------------------邊框的格式,厚度和顏色;
background-color: #ffffee;
--------------------------------------背景色,如果要透明背景就去掉整句;
SCROLLBAR-FACE-COLOR: #0000ff;
---------------滾動(dòng)條中間可以拉的部分和箭頭旁邊部分的顏色;
SCROLLBAR-TRACK-COLOR: #eeffff;
---------------滾動(dòng)條中間可以拉的部分以外的顏色;
SCROLLBAR-HIGHLIGHT-COLOR: #6cb424;
---------------滾動(dòng)條左側(cè)邊框的顏色(用於顯示立體之用);
SCROLLBAR-3DLIGHT-COLOR: #fcfc48;
---------------滾動(dòng)條左側(cè)邊框的顏色(用於顯示立體之用);
SCROLLBAR-SHADOW-COLOR: #90fcfc;
---------------滾動(dòng)條右側(cè)邊框的顏色(用於顯示陰影之用);
SCROLLBAR-DARKSHADOW-COLOR: #401687;
---------------滾動(dòng)條右側(cè)邊框的顏色(用於顯示陰影之用);
SCROLLBAR-ARROW-COLOR: #FFFF00;
---------------箭頭部分的顏色;
ZOOM: 100%;
---------------放大比率;
HEIGHT: 105px" face="Courier New, Courier, Monospace" color=#9933cc>
<P>test日誌內(nèi)容test</P>
<P>test日誌內(nèi)容test</P>
<P>test日誌內(nèi)容test</P>
<P>test日誌內(nèi)容test</P>
</FONT></DIV>
最後介紹八度經(jīng)常用的「簡(jiǎn)化版文本滾動(dòng)框」,去掉了上面的那些複雜語(yǔ)句,就可以簡(jiǎn)簡(jiǎn)單單的一個(gè)框框免除過(guò)多的花巧:
<DIV align=center><FONT style="FONT-SIZE: 11pt; OVERFLOW: auto; WIDTH: 90.62%; FONT-FAMILY: times new roman; HEIGHT: 87px" face="Courier New, Courier, Monospace" color=#9933cc>
<P align=left>test日誌內(nèi)容test</P>
<P align=left>test日誌內(nèi)容test</P>
<P align=left>test日誌內(nèi)容test</P>
<P align=left>test日誌內(nèi)容test</P></FONT>
</DIV>
最後特別注意兩點(diǎn):
1. 語(yǔ)句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替,但效果會(huì)差一截,大家吃飽飯沒(méi)事做可以試試看!
然而其他教程中的文本滾動(dòng)框都是用OVERFLOW: scroll;的,八度推介還是用OVERFLOW: auto;比較好...
2. 還有OVERFLOW-X: Hidden;是強(qiáng)制隱藏X軸滾動(dòng)條的,如果要隱藏Y怎麼辦呢?就用OVERFLOW-Y: Hidden咯!
代碼:
<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: #ffc0cb; SCROLLBAR-HIGHLIGHT-COLOR: #98fb98; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 470px; SCROLLBAR-SHADOW-COLOR: #ffb6c1; COLOR: #990099; SCROLLBAR-3DLIGHT-COLOR: #ffb6c1; SCROLLBAR-ARROW-COLOR: #f5deb3; SCROLLBAR-TRACK-COLOR: #ffdead; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #90ee90; HEIGHT: 180px; BACKGROUND-COLOR: #ffffe0" align=center>日志文字</DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 312px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 76px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><SPAN></SPAN> 文字</DIV></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: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #66ff66; SCROLLBAR-HIGHLIGHT-COLOR: #66ff99; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #00ff00; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #66ff99; SCROLLBAR-ARROW-COLOR: #009900; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #00ff00; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
<DIV align=left><FONT color=#009900></FONT> 文字</DIV></DIV>
<DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 319px; BACKGROUND-COLOR: #000000">
<P><FONT color=#ff9900>文字</FONT></P></DIV></TD></TR>
代碼:
<DIV align=center>
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 277px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 200px; BACKGROUND-COLOR: #000000" align=center>
<P align=left>文字</P></DIV></DIV>
代碼:
<DIV style="SCROLLBAR-FACE-COLOR: #ff6600; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; WIDTH: 463px; SCROLLBAR-SHADOW-COLOR: #663333; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #663333; HEIGHT: 119px; BACKGROUND-COLOR: #000000; SCROLLBAR-3DLIGHT-: #663333" align=left></DIV>
代碼:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcccc; SCROLLBAR-HIGHLIGHT-COLOR: #ff9999; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #ff9999; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ffcccc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 88px; BACKGROUND-COLOR: #ffcccc" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699> 文字</FONT></DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ff99cc; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff99cc; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ff99cc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffccff; HEIGHT: 111px; BACKGROUND-COLOR: #ffccff" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff> 文字</FONT></DIV></DIV>
代碼:
<DIV align=center>
<DIV style="BORDER-RIGHT: #f0b4b4 solid; BORDER-TOP: #f0b4b4 solid; SCROLLBAR-FACE-COLOR: #f0b4b4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0b4b4 solid; WIDTH: 316px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0b4b4 solid; SCROLLBAR-DARKSHADOW-COLOR: #f0b4b4; HEIGHT: 143px; BACKGROUND-COLOR: #ffe1f0" align=center>
<P align=left><FONT color=#9900cc>粉色透明效果滾動(dòng)框</FONT></P>
<P align=left> </P></DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 111px; BACKGROUND-COLOR: #ffcc99" align=center>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300> 文字</FONT></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>
代碼:
<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><FONT color=#009900></FONT> 文字</DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: #ffcc99 2px solid; BORDER-TOP: #ffcc99 2px solid; SCROLLBAR-FACE-COLOR: #ffffcc; SCROLLBAR-HIGHLIGHT-COLOR: #ffcc99; OVERFLOW: scroll; BORDER-LEFT: #ffcc99 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ffcc99; COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #ffffcc; SCROLLBAR-ARROW-COLOR: #ffcc99; BORDER-BOTTOM: #ffcc99 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 111px; BACKGROUND-COLOR: #ffffcc" align=center>
<DIV align=left><FONT color=#009900></FONT> 文字</DIV></DIV>
代碼:
<DIV style="BORDER-RIGHT: #f0c378 2pt dashed; BORDER-TOP: #f0c378 2pt dashed; SCROLLBAR-FACE-COLOR: #ffffb4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0c378 2pt dashed; WIDTH: 347px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0c378 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #999999; HEIGHT: 125px; BACKGROUND-COLOR: #ffffb4">
<P><FONT color=#ff9966>日志文字</FONT></P></DIV>
代碼:
<DIV style="BORDER-RIGHT: #9966ff 2px solid; BORDER-TOP: #9966ff 2px solid; SCROLLBAR-FACE-COLOR: #9999ff; SCROLLBAR-HIGHLIGHT-COLOR: #9966ff; OVERFLOW: scroll; BORDER-LEFT: #9966ff 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #9966ff; COLOR: #ffcc99; SCROLLBAR-3DLIGHT-COLOR: #9999ff; SCROLLBAR-ARROW-COLOR: #6633ff; BORDER-BOTTOM: #9966ff 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #9999ff; HEIGHT: 111px; BACKGROUND-COLOR: #9999ff" align=center></DIV>
代碼:
<DIV style="BORDER-RIGHT: #99ff99 3px dashed; BORDER-TOP: #99ff99 3px dashed; SCROLLBAR-FACE-COLOR: #99ff99; SCROLLBAR-HIGHLIGHT-COLOR: #99ff99; OVERFLOW: scroll; BORDER-LEFT: #99ff99 3px dashed; WIDTH: 64.47%; COLOR: #99ff99; BORDER-BOTTOM: #99ff99 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #00cc33; HEIGHT: 91px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=left>文字</P></DIV>
代碼:
<DIV style="BORDER-RIGHT: #e08caa 3px dashed; BORDER-TOP: #e08caa 3px dashed; SCROLLBAR-FACE-COLOR: white; SCROLLBAR-HIGHLIGHT-COLOR: #e08caa; OVERFLOW: scroll; BORDER-LEFT: #e08caa 3px dashed; WIDTH: 362px; COLOR: #e08caa; BORDER-BOTTOM: #e08caa 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #c850ff; HEIGHT: 55px; BACKGROUND-COLOR: #ffffff" align=left>
<P align=left>文字</P></DIV>
代碼:
<DIV style="BORDER-RIGHT: #ffccff 3px dashed; BORDER-TOP: #ffccff 3px dashed; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffccff; OVERFLOW: scroll; BORDER-LEFT: #ffccff 3px dashed; WIDTH: 70.08%; COLOR: #ffff66; BORDER-BOTTOM: #ffccff 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffff66; HEIGHT: 51px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=center>文字</P></FONT></DIV>
代碼:
<DIV style="BORDER-RIGHT: #d5aa55 3px dashed; BORDER-TOP: #d5aa55 3px dashed; SCROLLBAR-FACE-COLOR: white; SCROLLBAR-HIGHLIGHT-COLOR: #d5aa55; OVERFLOW: scroll; BORDER-LEFT: #d5aa55 3px dashed; WIDTH: 364px; COLOR: #d5aa55; BORDER-BOTTOM: #d5aa55 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #80ff00; HEIGHT: 57px; BACKGROUND-COLOR: #ffffff" align=center>
<P align=center>文字</P></DIV>
代碼:
<DIV style="BORDER-RIGHT: #2d0f00 2pt dashed; BORDER-TOP: #2d0f00 2pt dashed; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #2d0f00 2pt dashed; WIDTH: 256px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #c3c3b4; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: #2d0f00 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #c3c3b4; HEIGHT: 67px; BACKGROUND-COLOR: #c3c3b4; SCROLLBAR-: #c3c3b4"></DIV>
代碼:
<DIV style="BORDER-RIGHT: #cccc66 3px dashed; BORDER-TOP: #cccc66 3px dashed; SCROLLBAR-FACE-COLOR: #cccc66; SCROLLBAR-HIGHLIGHT-COLOR: #cccc66; OVERFLOW: scroll; BORDER-LEFT: #cccc66 3px dashed; WIDTH: 70.14%; COLOR: #ffff66; BORDER-BOTTOM: #cccc66 3px dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffff66; HEIGHT: 57px; BACKGROUND-COLOR: #ffffff" align=center>
<P><FONT color=#cc9933>文字</FONT></P></DIV>
代碼:
<DIV style="BORDER-RIGHT: #d2d2f0 2px dashed; BORDER-TOP: #d2d2f0 2px dashed; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #d2d2f0 2px dashed; WIDTH: 321px; SCROLLBAR-SHADOW-COLOR: #c3e1f0; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #d2d2f0 2px dashed; SCROLLBAR-DARKSHADOW-COLOR: #d2d2f0; HEIGHT: 70px; BACKGROUND-COLOR: #c3e1f0; SCROLLBAR-: #c3e1f0" align=left></DIV>
代碼:
<DIV style="BORDER-RIGHT: #da70d6 1px dashed; BORDER-TOP: #da70d6 1px dashed; SCROLLBAR-FACE-COLOR: #da70d6; SCROLLBAR-HIGHLIGHT-COLOR: #99ff99; OVERFLOW: scroll; BORDER-LEFT: #da70d6 1px dashed; WIDTH: 367px; COLOR: #99ff99; BORDER-BOTTOM: #da70d6 1px dashed; SCROLLBAR-DARKSHADOW-COLOR: #00cc33; HEIGHT: 70px; BACKGROUND-COLOR: #ffffb4" align=centre><FONT color=#8000ff>文字</FONT></DIV>
代碼:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #39bed6; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 375px; SCROLLBAR-SHADOW-COLOR: #39bed6; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff" align=center></DIV>
代碼:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 375px; SCROLLBAR-SHADOW-COLOR: #39bed6; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; HEIGHT: 94px; BACKGROUND-COLOR: #ffffff; SCROLLBAR-FACE-: #39bed6; SCROLLBAR-3DLIGHT-: #3d5054; SCROLLBAR-: #85989c" align=center></DIV>
代碼:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 81px" align=center>
<P align=left>文字</P></DIV>
簡(jiǎn)單透明滾動(dòng)框代碼:
<DIV style="OVERFLOW: auto; WIDTH: 362px; HEIGHT: 60px">
<P>文字</P></DIV>
語(yǔ)法為一句代碼:
<div style="height:200px;overflow:auto">
透明滾動(dòng)框代碼:
<DIV style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: black 0px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px; BACKGROUND-COLOR: transparent">
<DIV align=left><FONT color=#8000ff>文字</FONT></DIV></DIV>
全透明滾動(dòng)框代碼:
<DIV style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: 0px solid; WIDTH: 385px; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 105px">
<P>文字</P></DIV>
白底滾動(dòng)框代碼:
<DIV style="BORDER-RIGHT: white 2px solid; BORDER-TOP: white 2px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: white 2px solid; WIDTH: 305px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #1e90ff; BORDER-BOTTOM: white 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 252px; BACKGROUND-COLOR: #ffffff" align=left><FONT color=#6699ff>
<P align=left> 白底滾動(dòng)框</P></DIV>
<DIV align=left><FONT color=#6699ff></FONT> </DIV></FONT>
滾動(dòng)框加背景代碼:
<TABLE cellSpacing=0 cellPadding=0 background=http://www.urban.ne.jp/home/katoss/sozai_01_12/mozakabe6.gif border=0>
<TBODY>
<TR>
<TD>
<P>
<TABLE cellSpacing=0 cellPadding=0 background=http://www.urban.ne.jp/home/katoss/sozai_01_12/mozakabe6.gif border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 323px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 85px">
<P>文字</P>
<P> </P></DIV></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>
左側(cè)滾動(dòng)文本框代碼如下:
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 445px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; DIRECTION: rtl; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 87px; BACKGROUND-COLOR: #fffacd">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></DIV></DIV>
代碼如下:
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 377px; DIRECTION: rtl; BORDER-BOTTOM: 1px solid; HEIGHT: 62px">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>文字</P></DIV></DIV>
——取自爬山虎,
1,基本捲軸HTML語(yǔ)法:
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600">編輯文字圖片內(nèi)容</DIV>
用法:
(替換語(yǔ)法時(shí),注意style=""中的內(nèi)容,每一部分用"分號(hào) ;"隔開(kāi),接著空一格。)
1.當(dāng)"內(nèi)容區(qū)域"大於"顯示區(qū)域"時(shí),可利用捲軸讓看見(jiàn)超出范圍的內(nèi)容。利用滑
鼠游標(biāo)調(diào)整"顯示區(qū)域",滑鼠游標(biāo)點(diǎn)選捲軸,會(huì)變成可調(diào)整大小的狀態(tài),可隨
心所欲的調(diào)整大小,語(yǔ)法中的width和height也會(huì)隨著變。
PS:去除width:10px的元素,寬會(huì)自動(dòng)擴(kuò)展到最大。
2.語(yǔ)法( OVERFLOW: scroll )為顯示右方和下方捲軸。整個(gè)還可以分別替換成
★( OVERFLOW: auto ) : "內(nèi)容區(qū)域"大於"顯示區(qū)域"會(huì)自動(dòng)顯示捲軸,建議使用。
★( OVERFLOW: scroll; OVERFLOW-X: hidden ): 刪除水平→捲軸。
★( OVERFLOW: scroll; OVERFLOW-Y: hidden ): 刪除垂直↑捲軸。
★( OVERFLOW: hidden) : 不使用捲軸。
3.語(yǔ)法( background-color: #996600 )為框框內(nèi)的背景顏色,#996600 部分為16進(jìn)位顏
色碼,記得要加上"#"。
PS.整段刪除,背景變成透明狀態(tài)。
2.為捲軸加外框
基礎(chǔ)語(yǔ)法中,在style="__"中,在__的地方加入( BORDER: #ff0000 5px dotted ),
情況如下:
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted">編輯文字圖片內(nèi)容</DIV>
加入后,切換編輯列上"<HTML>"(?點(diǎn)我)兩次后,在回到"<HTML>模式"(?點(diǎn)我)中就會(huì)見(jiàn)到,( BORDER: #ff0000 5px dotted )被拆成四部份分別BORDER-RIGHT(右邊框),BORDER-TOP(上邊框),BORDER-LEFT(左邊框), BORDER-BOTTOM(底邊框)變成
(BORDER-RIGHT: #ff0000 5px dotted;
BORDER-TOP: #ff0000 5px dotted;
BORDER-LEFT: #ff0000 5px dotted;
BORDER-BOTTOM: #ff0000 5px dotted )。
用法:
(BORDER: #ff0000 5px dotted)或(BORDER-RIGHT: #ff0000 5px dotted; BORDER-TOP: #ff0000 5px dotted; BORDER-LEFT: #ff0000 5px dotted; BORDER-BOTTOM: #ff0000 5px dotted )都有共同結(jié)構(gòu),分析如下:
( BORDER: #ff0000 5px dotted )
★(#ff0000)框的顏色,#996600 部分為16進(jìn)位顏色碼,記得要加上"#",依框的屬性上下左右可調(diào)整不同顏色。
★(5px):框的大小,數(shù)字越大,框就越粗。0為無(wú)框。
★(dotted):框的類型,(dotted)為"點(diǎn)"的型態(tài),可替換其他的有 實(shí)線:( solid ),
虛線:( dashed ),立體內(nèi)凸框:(groove),立體浮凸框: (ridge),
雙實(shí)線: (double),凹框: ( inset),凸框: (outset),依框的屬性可調(diào)整上下左
右使用不同屬性的框。
3.為捲軸調(diào)色:
首先取得{捲軸顏色語(yǔ)法}內(nèi)容可以用捲軸顏色產(chǎn)生器取得,捲軸顏色產(chǎn)生器網(wǎng)址如下:
捲軸顏色產(chǎn)生器
http://cdh.idv.tw/cdh/no04.htm捲軸顏色編輯器
http://wao317.sytes.net/317/layout.php自動(dòng)捲軸配色編碼器
【 顏色代碼 】在線匯總捲軸顏色生成器
http://hw-driver-bal.nctu.cc:52833/pub/slime/teach/Bar.htm捲軸顏色產(chǎn)生器編輯完成后會(huì)得到如下語(yǔ)法:
<style>
BODY {
SCROLLBAR-FACE-COLOR: #00ffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffff00;
SCROLLBAR-SHADOW-COLOR: #777777;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #00ff00;
SCROLLBAR-TRACK-COLOR: #770000;
SCROLLBAR-DARKSHADOW-COLOR: #ff00ff;
SCROLLBAR-BASE-COLOR: #0000ff
}
</style>
復(fù)製以上所需要反黃部份,此反黃部份為捲軸變色的語(yǔ)法。在基礎(chǔ)語(yǔ)法(見(jiàn)上面1.基本捲軸)中,在style="__"中,在__的地方加入反白部份。注意,每一部分用"分號(hào) ;"隔開(kāi),接著空一格。得到的結(jié)果如下(加入的語(yǔ)法為畫(huà)底線):
HTML語(yǔ)法:
<DIV style="OVERFLOW: scroll; HEIGHT: 60px; background-color: #996600; BORDER: #ff0000 5px dotted; SCROLLBAR-FACE-COLOR: #00ffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffff00;
SCROLLBAR-SHADOW-COLOR: #777777;
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-ARROW-COLOR: #00ff00;
SCROLLBAR-TRACK-COLOR: #770000;
SCROLLBAR-DARKSHADOW-COLOR: #ff00ff;
SCROLLBAR-BASE-COLOR: #0000ff">編輯文字圖片內(nèi)容</DIV>
用法:
■( SCROLLBAR-FACE-COLOR: )拖曳棒與按鈕表面顏色。
■( SCROLLBAR-HIGHLIGHT-COLOR: )捲軸與按鈕四周內(nèi)邊框左上
立體亮面的顏色。
■( SCROLLBAR-SHADOW-COLOR: )捲軸與按鈕四周內(nèi)邊框右下立
體暗面的顏色。
■( SCROLLBAR-3DLIGHT-COLOR: )捲軸與按鈕四周外邊邊框左上
立體亮面的顏色。
■( SCROLLBAR-ARROW-COLOR: )按鈕箭頭▲▼顏色。
■( SCROLLBAR-TRACK-COLOR: )捲軸軌道的顏色。
■( SCROLLBAR-DARKSHADOW-COLOR: )捲軸與按鈕四周外
邊框右下立體暗面的顏色。
■( SCROLLBAR-BASE-COLOR: )捲軸整體的顏色,單獨(dú)使用效果
比較明顯。
4.變化應(yīng)用:
1.左側(cè)拖曳棒
HTML語(yǔ)法:
<DIV style="OVERFLOW: scroll; DIRECTION: rtl; HEIGHT: 60px; BACKGROUND-COLOR: #996600">
<DIV style="DIRECTION: ltr" align=left>編輯文字圖片內(nèi)容</DIV></DIV>
2.隱形的捲軸(只看的見(jiàn)按鈕箭頭▲▼)
HTML語(yǔ)法:
<DIV style="SCROLLBAR-FACE-COLOR: #996600; SCROLLBAR-HIGHLIGHT-COLOR: #996600; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #996600; SCROLLBAR-3DLIGHT-COLOR: #996600; SCROLLBAR-TRACK-COLOR: #996600; SCROLLBAR-DARKSHADOW-COLOR: #996600; HEIGHT: 60px; SCROLLBAR-ARROW-COLOR:#FF0000; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV>
3.透明的捲軸
HTML語(yǔ)法:
<DIV style="FILTER: Chroma(Color=green); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV></DIV>
4.發(fā)光的捲軸
HTML語(yǔ)法:
<DIV style="FILTER: Chroma(Color=green)glow(color:6666ff,Strength=6); HEIGHT: 1px">
<DIV style="SCROLLBAR-FACE-COLOR: green; SCROLLBAR-HIGHLIGHT-COLOR: red; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: green; SCROLLBAR-3DLIGHT-COLOR: green; SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-DARKSHADOW-COLOR: red; HEIGHT: 60px; BACKGROUND-COLOR: #996600">編輯文字圖片內(nèi)容</DIV></DIV>
5.加上背景的捲軸
★背景不跟捲軸移動(dòng)
HTML語(yǔ)法:
<TABLE width="100%" background=背景圖片連結(jié)><TBODY><TR><TD vAlign=top align=left><DIV style="OVERFLOW: auto; HEIGHT: 60px">編輯文字圖片內(nèi)容</DIV></TD></TR></TBODY></TABLE>
★背景跟卷軸移動(dòng)
HTML語(yǔ)法:
<DIV style="OVERFLOW: auto; HEIGHT: 60px"><TABLE width="100%" background=背景圖片連結(jié)><TBODY><TR><TD vAlign=top align=left>編輯文字圖片內(nèi)容</TD></TR></TBODY></TABLE></DIV>
ldm2124086blog 口袋歡迎你