|
簡易滾動條文本框：
<textarea>插入內(nèi)容</textarea>
說明：
文本框可以自由拉寬拉長。方法是在文章編輯欄顯示的文本框中單擊鼠標左鍵，出現(xiàn)變形框和變形點，鼠標拖動這些點就可以拉伸文本框了。
|
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
|
①DIV：未設(shè)置寬度、高度、溢出；溢出默認為可見，寬度和高度自動調(diào)整 |
|
|
|
|
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
②DIV：設(shè)置寬度、高度，未設(shè)置溢出；溢出默認為可見，高度設(shè)置無效并自動調(diào)整 |
③DIV：設(shè)置寬度、高度，溢出為滾動；始終顯示滾動條 |
④DIV：設(shè)置寬度、高度，溢出為自動；根據(jù)內(nèi)容多少決定是否顯示滾動條 |
|
|
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑤DIV：設(shè)置寬度、高度，溢出為自動，假透明滾動條樣式1；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用顏色實現(xiàn)假透明效果1，適用于文字 |
⑥Table/DIV：設(shè)置寬度、高度，溢出為自動，背景圖片、假透明滾動條樣式1；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用顏色實現(xiàn)假透明效果1，不適用于背景圖片 |
⑦Table/DIV：設(shè)置寬度、高度，溢出為自動，背景圖片、真透明滾動條樣式1；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用濾鏡實現(xiàn)真透明效果1，適用于文字和背景圖片 |
|
|
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑧DIV：設(shè)置寬度、高度，溢出為自動，假透明滾動條樣式2；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用顏色實現(xiàn)假透明效果2，適用于文字 |
⑨Table/DIV：設(shè)置寬度、高度，溢出為自動，背景圖片、假透明滾動條樣式2；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用顏色實現(xiàn)假透明效果2，不適用于背景圖片 |
⑩Table/DIV：設(shè)置寬度、高度，溢出為自動，背景圖片、真透明滾動條樣式2；根據(jù)內(nèi)容多少決定是否顯示滾動條，利用濾鏡實現(xiàn)真透明效果2，適用于文字和背景圖片 |
|
|
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑾DIV：增加“word-break:keep-all;”屬性，即可實現(xiàn)橫向滾動條。 |
⑿DIV/DIV：嵌入另外一個DIV，并且對他們設(shè)置“DIRECTION”屬性，即可實現(xiàn)左側(cè)滾動條。 |
⒀Table/DIV/DIV：左側(cè)真透明滾動條和背景圖片的綜合運用。 |
【HTML代碼】
|
②
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試 |
③
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
④
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
⑤
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
|
⑥
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑦
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑧
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
⑨
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
|
⑩
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
⑾
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
⑿
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 |
⒀
這是測試文字
這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字這是測試文字 | |
屬性設(shè)置：WIDTH: 148;HEIGHT: 100; 根據(jù)使用的位置,可調(diào)整寬度和高度.
OVERFLOW: scroll; 顯示縱橫滾動條.上部的演示均屬設(shè)置為scroll的界面. 但一般都設(shè)置為：auto(需要時才顯示)
BACKGROUND-COLOR: transparent; 滾動框內(nèi)部背景顏色.transparent為透明色.其他可使用顏色代碼.
【說明】
★ 必須在html編輯狀態(tài)下編輯代碼。
★ 簡單的文本框是通過DIV實現(xiàn)的，包含背景圖片的文本框是通過將DIV嵌入到Table中實現(xiàn)的。
★ 主要通過對DIV的Style屬性來控制樣式，主要設(shè)置如下：
★ overflow（溢出控制）：visible（默認，可見）、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（字體粗細）：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（默認，正常斷字）、keep-all（嚴格不斷字）、break-all（嚴格斷字）；
★ direction（文字方向）：ltr（默認，從左向右）、rtl（從右向左）。
----------------------------------------------------------
另類滾動條
------------------------------1----------------------------
附滾動條的語法解釋：
align=center 表示框內(nèi)內(nèi)容居中對齊，缺省情況下為左對齊。
background-color: transprant; 表示框內(nèi)背景色為透明，需要改顏色的話，把transprant改成16進制顏色值即可。
border: solid 2px black 表示文本框的邊線狀態(tài)，solid表示實線，可選的值有dashed(虛線)，double(雙線)，outset等。 2px black分別表示邊線粗細和顏色，可自行調(diào)整（注：black和#000000效果一樣）將文本滾動框的邊框值設(shè)置為0，即border: solid 0px
width: 355px; height: 200px; 分別表示滾動文本框的寬和高。
overflow: auto; auto表示"自動"，即框內(nèi)內(nèi)容不需要占據(jù)height: 200px這么高的高度時，就不會出現(xiàn)滾動條，一旦超過了，滾動條就會出現(xiàn)，多出的部分通過下拉滾動條來顯示，overflow也設(shè)置的值還有scroll，即強制出現(xiàn)滾動條，因為這樣也會強制出現(xiàn)橫向的滾動條，很難看。
比較有用的是 scrollbar-face-color: #889B9F; 這句，其他部分不改也問題不大。將有關(guān)文本滾動框的各個組成部分的色彩均設(shè)為與日志背景相同，即修改各參數(shù)的色彩值。但滾動條箭頭色彩，即scrollbar-arrow-color: 應(yīng)不同的色彩值。
FONT style=" ---文字格式;
align=left>OVERFLOW: auto; ---超過範圍就自動生成滾動條;
OVERFLOW-X: Hidden; ---需要時才用，用來隱藏X軸滾動條的;
border: solid 2px black ---邊框的格式，厚度和顏色;
background-color: #ffffee; ----背景色,如果要透明背景就去掉整句;
SCROLLBAR-FACE-COLOR: #0000ff; ----滾動條中間可以拉的部分和箭頭旁邊部分的顏色;
SCROLLBAR-TRACK-COLOR: #eeffff; ---滾動條中間可以拉的部分以外的顏色;
SCROLLBAR-HIGHLIGHT-COLOR: #6cb424; ---滾動條左側(cè)邊框的顏色（用於顯示立體之用）;
SCROLLBAR-3DLIGHT-COLOR: #fcfc48; ----滾動條左側(cè)邊框的顏色（用於顯示立體之用）;
SCROLLBAR-SHADOW-COLOR: #90fcfc; ---滾動條右側(cè)邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-DARKSHADOW-COLOR: #401687; ----滾動條右側(cè)邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-ARROW-COLOR: #FFFF00; ----箭頭部分的顏色;
ZOOM: 100%; ---放大比率;
最後特別注意兩點：1.語句中的 OVERFLOW: auto; 可以用 OVERFLOW: scroll; 代替，但效果會差一截，大家可以試試看！然而其他教程中的文本滾動框都是用 OVERFLOW: scroll; 的，推介還是用 OVERFLOW: auto; 比較好.
2.還有OVERFLOW-X: Hidden;是強制隱藏X軸滾動條的，如果要隱藏Y怎麼辦呢？就用OVERFLOW-Y: Hidden咯！
-----------------------------2-----------------------------
----------------------------3------------------------------
-----------------------------4-----------------------------
----------------------------5------------------------------
-----------------------------6-----------------------------
---------------------------7-------------------------------
---------------------------8-------------------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
--------------------------9--------------------------------
--------------------------10--------------------------------
--------------------------11--------------------------------
---------------------------12-------------------------------
---------------------------13-------------------------------
-------------------------14---------------------------------
-------------------------15---------------------------------
--------------------------16--------------------------------
--------------------------17--------------------------------
-------------------------18---------------------------------
----------------------------19------------------------------
---------------------------20-------------------------------
---------------------------21-------------------------------
---------------------------22-------------------------------
---------------------------23-------------------------------
--------------------------24--------------------------------
-----------------------------25-----------------------------
--------------------------26--------------------------------
-------------------------27---------------------------------
-------------------------28---------------------------------
----------------------------29------------------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
---------------------------30-------------------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
--------------------31----簡單透明滾動框--------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
----------------------------32------------------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
----------------------33----全透明滾動框------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
----------------------34-----白底滾動框----------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
--------------------------35--------------------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
-----------------------36---左側(cè)滾動框----------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
-----------------------37-----左側(cè)滾動框----------------------
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
這里輸入內(nèi)容
| 
