文本滾動框的製作

要玩轉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軸?
回去看看小學數學課本吧!

    

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

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

 

100 Responses to “文本滾動框的製作”

  1. 麗`草莓 Says:

    谢谢了…………

  2. Says:

    http://lzjthy.vip.sina.com/yansedaima.htm哈哈,我找到了颜色代码!

  3. Tanya Says:

    图片怎么添加进去啊?我把word里的东西直接粘贴过去,只有显示文字!真晕啦~救救我吧!555555

  4. Tanya Says:

    囊到我的spaces上告诉我吗?

  5. west Says:

    谢谢。。。。。。。。。。。。无语,连老天都感动的哭啦

  6. SIU WAN Says:

    我也可以用了,謝謝!

  7. bing Says:

    非常感谢

  8. 悟空 Says:

    谢谢。

  9. Unknown Says:

    谢谢了

  10. 〓風之殤〓 Says:

    多谢多谢..我总算弄成功了,不过别的代码还是不会啊…..哭..

  11. Lisa Says:

    学到了,谢谢,改天试试~

  12. ┍.織羽寶貝мē黎Dē▼风向星座 Says:

    我还是 不会 请楼主教教我啊

  13. 霧雨 Says:

    又学到一招!多谢了 !

  14. amy Says:

    谢谢….

  15. .oО清..+. Says:

    嗯...要仔细研究...

  16. Unknown Says:

    我做個連接到你這呀,,順便學下野,不介意吧。。。還想請教下點樣整個音樂播放器。。。。有空教下啦。。。

  17. 腾云 Says:

    我按了HTML为什么是一堆我不认识的符号啊?

  18. 天行 驿居 Says:

    好有心呀!指出这么多的space的用途,好实用的!! 才建的空间一切的从头学起,你的指教给了很大的启发,谢了!没事时到我那坐坐。 我的涂鸦留言本是 http://www.flashinn.com/gb/hushuo 在这里你可以涂鸦留言的。

  19. confite Says:

    高度怎么调,偶比较笨

  20. jian Says:

    dddddddddddddddd

  21. Cat Evil Says:

    嘿嘿···謝謝,搞了半天終于有成果啦···請問一下 ,不介意硪把這一段教程貼到硪得空間吧??先擅自貼嘍哦?有什麽不妥,請跟我講>0< 馬上刪除···有空,光臨一下硪得地盤哦···

  22. 方向感 Says:

    太好了,是人民之所需呀!!!!!!!!!1

  23. 花花丫 Says:

    恩,学会了,谢谢。(从没谢过你呢,呵呵)

  24. Says:

    你好 实在太笨了 我有一篇日志特别长 就是需要这样的滚动条 我弄完了整个全乱了 哎 可真够笨的 虽然没学会 但谢谢你

  25. ⊱✲⊰⊹Snowyn⊹⊱✲⊰ Says:

    诶,怎么不好用呢。哪几个command是必须的。为什么每次都保存不了呢?

  26. oO迷糊乱乱Oo Says:

    很实用!!还很简单!!谢谢啦!!顺便说声:圣诞快乐!!

  27. Deshu Says:

    我也来学习。多谢!

  28. Deshu Says:

    我也来学习。多谢!

  29. 宏智 Says:

    VERY WELL

  30. Says:

    新年快乐!

  31. jessie Says:

    偶也搞好了。Thanks!

  32. pi Says:

    大恩不言谢!

  33. Says:

    说实话~还是不太明白……

  34. Says:

    弄好了,但怎么让他大一点呢?太小了不方便看啊~谢谢

  35. Says:

    呵呵,会弄了~~~~

  36. qingfeng Says:

    谢谢!说明,使用时根据文本的内容 适当的更改 宽度和高度的px值。在非html编辑状态下,双击模版中的几行字,将其删除然后将新的内容粘贴过来。

  37. Says:

    终于做好了,很开心!多谢了!

  38. 摩尔猫 Says:

    凑合合弄好了范本谢谢

  39. Raolex Says:

    谢谢~不过现在还暂时用不到~先超联了~相信你不会介意的~哈~

  40. Joen Says:

    學到野啦…….不过我真系好好好初级…..但系我都好希望有日识用得晒你教既野!

  41. Surfy氺_唲ér Says:

    根据你的「簡化版文本滾動框」 偶很机械的复制了过去 OK 没问题8过对于你的 文本滾動框的源代碼偶是不太明白诶。。是直接加进去么。郁闷下 看来要多多实践。。

  42. Quееny Says:

    哇~~从你这里能学到好多东西哦~~太好了~~

  43. Unknown Says:

    还要用HTML编辑啊,恩,这样确实省了不少地方,看起来也不会太麻烦….

  44. 熙熙 Says:

    看着有点复杂,还是不太会哈…….

  45. Unknown Says:

    哈,按妳的教程自己动手做了一个,有点不明白那滾動條怎么可以變長,在代碼那裏改?高手指教!THANKS

  46. Unknown Says:

    谢谢,基本上是会了

  47. Garfield Says:

    努力中!!谢了

  48. 大自然法 Says:

    从你这里能学到好多东西哦,太感谢你了!

  49. 大自然法 Says:

    按照你的提示,把网络日志发表后,文框代码还在文章里,怎样消除呢?这样太不美观了!

  50. Unknown Says:

    学会,不过只会照搬啦

  51. 思绮 Says:

    每次别人都要滚着看,会不会烦呢?只是疑问一下

  52. ミ灬ξ鳯儛乆兲ミ灬ξ@玮玮@ Says:

    呵呵~~不烦不烦

  53. 芒果小包子 Says:

    嘿嘿,很好用谢谢

  54. Says:

    找了很久啦,谢啦

  55. beili Says:

    很感谢

  56. Says:

    还在想怎么把日志搞成那样,现在就看到了,谢谢

  57. nan Says:

    过来问一下,我想做一个非常简单的滚动条~~中间只有一条线,和两个箭头部分那种~
    请问怎么做呢?
    顺便说一下
    链接了你的spaces~~
    希望你同意
    谢谢你~~~~

  58. 元元 Says:

    刚想弄个条儿呢,之前看到的办法都太复杂,这个够简单,适合我的水平,呵呵~
    谢谢啦!

  59. WEN YU Says:

    看了你的日志,我也会弄了,谢谢!

  60. liuywenchao Says:

    支持下果然是高手学到了很多

  61. Says:

    努力消化中!~~~~~`

  62. xixitao Says:

    用到了,谢谢你

  63. 魄力咖啡 Says:

    谢谢
    学会了一个
    蛮不错的
    以后继续关注

  64. 水无月 Says:

    呵呵,应用成功,请看:http://spaces.msn.com/moonwellmoonwell1978/blog/cns!44760BAA4280A10!339.entry
     
    谢谢。

  65. Says:

    成功,不过是照搬啦。一点都看不懂的说。

  66. k9k9 Says:

    非常谢谢 ~~  用到了 ~~~~~~ 

  67. LQL Says:

    谢谢!~

  68. http://spaces.msn.com/qiang0926 Says:

    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
    强烈支持!!!!!!!!!!!!!!!!
    三可有

  69. Says:

    哥们,有你我什麽都不怕了。
    谢!

  70. 月照汐粼 Says:

    真棒,努力学习中。不过这位大哥,X、Y轴这种东西,应该是初中学的吧……

  71. yiyi Says:

    我把这写加上去之后为什么,没有滚动烂,而是显示我复制上去的这些乱七八糟的码啊?请问各位,是在日志里面加嘛?

  72. 婷婷 Says:

    谢谢,我的文章已成功滚了起来,以后一定常来学习

  73. Says:

    谢谢了,新手,新手,收藏了你的东西了。谢谢。

  74. Jessica Says:

    thank you very much!!!

  75. 梅梅 Says:

    又来了!又满足的走了!呵呵

  76. 风雨同舟 Says:

    拿走了哦~3Q

  77. 蓝海之子 Says:

    好东西啊支持一下,真好用。还有一个疑问就是每篇都要加这个代码的吗?还是有什么通用的方法?

  78. 雲飛 Says:

    555555
    我太笨,那位哥哥姐姐能告诉我html在哪?

  79. Amabel Says:

    这个好有用啊~~谢谢啦!!
    每次学一个东西,我都觉得要少活十年….太费脑子了-_-#

  80. 醜老鴨 Says:

    研究了一下下
    還是跟昨天一樣有看沒有懂
    下次再來研究~~

  81. 醜老鴨 Says:

    今天終於搞定這~~滾動條 
    (雖然還是有點給它不太懂~~)
    3Q  啦~~
     
     

  82. 悲伤无限 Says:

    太苯了,试着用
     

  83. jeffyourn Says:

    thanks u a lot
    I made it…..haha    actually, i owed u a lot..

  84. huang Says:

    成功…^^…
    謝謝

  85. ✖唄唄✖ ⇘﹏。 Says:

    谢谢,非常感谢“`一切搞定“`谢谢谢谢“`

  86. 燕子 Says:

    怎么还是看不太懂啊,太笨了???
    好逊啊!!!

  87. 水阁香花 Says:

    OK了,谢谢,很使用

  88. 缅俱 Says:

    谢过 ing…………..

  89. 采滢 Says:

    好是好啦,可俺不会用啊,惨吧……
    Thank you all the same!

  90. 微尘子 Says:

    汗~听着不很难。。。试试去!!

  91. 海洋之心 Says:

    看不懂啊那怎么办?

  92. Jessica Says:

    很好用耶!
    来你这学点东西真是太棒了!
    再去看点别滴!
    闪!

  93. delphine Says:

    一学就会,很好用,谢过,闪ing!

  94. Says:

    好用,方便.谢了!

  95. 我的档案~~ Says:

    还是不太懂啊。

  96. 我的档案~~ Says:

    呜呜呜呜呜呜呜。
    还是失败......

  97. fangqin Says:

    谢谢大哥哥。好用。

  98. xiang Says:

    还是不行呀
     

Leave a comment