Samuel 的个人资料Samuelの八度空間™照片日志列表更多 工具 帮助

文本滾動框的製作


要玩轉Spaces,首先一定要懂得用進入HTML模式編輯日誌,以前有『Edit it』,現在退休了,

現在只要直接按<HTML>就可以進入...才能充分發揮MSN SPACES的功能…




文本滾動框...俗稱「滾動條」...是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就是改整個框的高度;
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咯!

什麼?不知道什麼是X軸和Y軸?
回去看看小學數學課本吧!

    


這篇東東很久以前就已經想發了,不過一直存放在草稿裡...
今天翻出來了,就馬上給發啦!呵呵!

延伸閱讀:利用草稿來豐富您的日誌...


 

评论 (218)

请稍候...
很抱歉,您输入的评论太长。请缩短您的评论。
您没有输入任何内容,请重试。
很抱歉,我们当前无法添加您的评论。请稍后重试。
若要添加评论,需要您的家长授予您相应权限。请求权限
您的家长禁用了评论功能。
很抱歉,我们当前无法删除您的评论。请稍后重试。
您已超过了一天之内允许提供的评论数上限。请在 24 小时后重试。
因为我们的系统表明您可能在向其他用户提供垃圾评论,您的帐户已禁用了评论功能。如果您认为我们错误地禁用了您的帐户,请联系 Windows Live 支持部门
完成下面的安全检查,您提供评论的过程才能完成。
您在安全检查中键入的字符必须与图片或音频中的字符一致。

若要添加评论,请使用您的 Windows Live ID 登录(如果您使用过 Hotmail、Messenger 或 Xbox LIVE,您就拥有 Windows Live ID)。登录


还没有 Windows Live ID 吗?请注册

9 月 28 日
linxiang发表:
还是不行呀
 
2 月 27 日
doufangqin发表:
谢谢大哥哥。好用。
7 月 31 日
呜呜呜呜呜呜呜。
还是失败......
7 月 28 日
还是不太懂啊。
7 月 28 日
张嫣发表:
好用,方便.谢了!
7 月 18 日
一学就会,很好用,谢过,闪ing!
7 月 14 日
liuJessica发表:
很好用耶!
来你这学点东西真是太棒了!
再去看点别滴!
闪!
7 月 12 日
看不懂啊那怎么办?
7 月 5 日
匿名 的图片
微尘子 发表:
汗~听着不很难。。。试试去!!
6 月 21 日
何采滢发表:
好是好啦,可俺不会用啊,惨吧......
Thank you all the same!
6 月 14 日
缅俱发表:
谢过 ing..............
6 月 12 日
水阁香花发表:
OK了,谢谢,很使用
6 月 12 日
燕子发表:
怎么还是看不太懂啊,太笨了???
好逊啊!!!
6 月 11 日
谢谢,非常感谢```一切搞定```谢谢谢谢```
6 月 11 日
bjhuang发表:
成功...^^...
謝謝
6 月 8 日
jeffyourn发表:
thanks u a lot
I made it.....haha    actually, i owed u a lot..
5 月 27 日
悲伤无限发表:
太苯了,试着用
 
5 月 25 日
醜老鴨发表:
今天終於搞定這~~滾動條 
(雖然還是有點給它不太懂~~)
3Q  啦~~
 
 
5 月 23 日
醜老鴨发表:
研究了一下下
還是跟昨天一樣有看沒有懂
下次再來研究~~
5 月 22 日