June 24
MSN Space技巧--文本滚动框的制作
文本滾動框...俗稱「滾動條」...是HTML語言中一個挺不錯的功能,因為能夠通過旁邊的滾動欄來調節位置,免得要讀者為了看這一大篇東西而不斷地把鼠標調到旁邊然後往下拉...,現在只要在這一個小小的範圍拉動就可以了,而且還節省了很多空間,不會顯得內容很多,看到眼花的感覺,是不是很方便呢?
文本滾動框的源代碼:
<DIV align=center>
--------------------------------------置中;
<FONT style=";
--------------------------------------文字格式;
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;
---------------滾動條左側邊框的顏色(用於顯示立體之用);
SCROLLBAR-3DLIGHT-COLOR: #fcfc48;
---------------滾動條左側邊框的顏色(用於顯示立體之用);
SCROLLBAR-SHADOW-COLOR: #90fcfc;
---------------滾動條右側邊框的顏色(用於顯示陰影之用);
SCROLLBAR-DARKSHADOW-COLOR: #401687;
---------------滾動條右側邊框的顏色(用於顯示陰影之用);
SCROLLBAR-ARROW-COLOR: #FFFF00;
---------------箭頭部分顏色;
ZOOM: 100%;
---------------放大比率;
HEIGHT: 105px" face="Courier New, Courier, Monospace" color=#9933cc>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
</FONT></DIV>
效果:
test日誌內容test
test日誌內容test
test日誌內容test
test日誌內容test
「簡化版文本滾動框」
<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日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P></FONT>
</DIV>
最後特別注意兩點:
1. 語句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替,但效果會差一截,大家吃飽飯沒事做可以試試看!
然而其他教程中的文本滾動框都是用OVERFLOW: scroll;的,八度推介還是用OVERFLOW: auto;比較好...
2. 還有OVERFLOW-X: Hidden;是強制轉換X軸滾動條隱藏的,如果要隱藏Y怎麼辦呢?就用OVERFLOW-Y: Hidden咯!
改编自
在八度空間中迷失方向。