[ 回上一頁 ]
跑馬燈│基礎語法│ 增加屬性│圖片也可以跟著跑│滑鼠移入就會停止│
一般的跑馬燈 |
| ||
左右來回彈的跑馬燈 | |||
帶著圖形 與 超連結 一起跑的跑馬燈 | |||
哇!好多不一樣的跑馬燈喔~ ^.^ 跑馬燈可以有很多變化,只要你了解一些關於跑馬燈的HTML語言... | |||
跑馬燈的基楚HTML: | 編輯網頁,打開原始碼
| ||
| |||
HTML標籤語言通常是配對的, | |||
跑馬燈是以 結尾, | |||
在標籤語言中間所包含的就是要〝跑〞的東西。 | |||
註 :HTML中『 < 』 與 『 > 』符號,是鍵盤上的〝大於〞、〝 小於〞 那個符號, 不是注音符號中的 括弧 喔! | |||
屬性 | |
跑馬燈不只只能向左跑,還可以改變 方向、速度... 還有設定範圍的的寬高,只要在標籤中加上「屬性」就可控制。 | |
加在那兒? | |
> 要跑的文字 | |
註:加屬性前記得按一格「空白鍵」, 〝空格〞 是「屬性」與「屬性」間的分段,你可以任意組合使用。 |
屬 性 一 覽 表 | ||||
屬 性 | 其 他 說 明 | 範 例 | 範 例 的 完 整 語 法 | |
對齊 align="top" | 齊上 top 居中 midden 齊下 botton | |||
方向 direction="up" | 左 left 右 right 上 up 下 dun | 慢慢向上跑 | height="50" scrollamount="1"> 要跑的文字 | |
行為 behavior="altemate" | 左右來回 alternate 進入後停止slide 反覆 scroll | 左右來回彈 | > 要跑的文字 | |
進入後停止 | > 要跑的文字 | |||
(備註:一般反覆scroll的指令不用寫,因為那是預設) | ||||
高 height="高的數字" | (跑馬燈區域的高度) | |||
寬 width="寬的數字" | (跑馬燈區域的寬度) | |||
速度 scrollamount="1" | 中間的數字是 「滑動步伐的寬」 | 步伐寬1 | 步伐寬5 | > 要跑的文字 |
> 要跑的文字 | ||||
背景色 bgcolor="#0022FF" | "#0022FF"是HTML色碼,兩個 兩個為一組,由00~99,AA~FF所組成,代表紅R、綠G、藍B, 數字越小越深,數字越大越亮。 例:紅 #FF0000,綠 #00FF00,藍 #0000FF,黃 #FFFF00,紫 #9966CC,....。 |
圖片也可以跟著跑 | |||
在跑馬燈 標籤開始 至結尾,中間所包含的物件 都會跟著跑,包含文字、圖形、超連結... | |||
範例: | 圖 與 超連結 都可以夾帶一起跑 | ||
寫法: | |||
| |||
【說明】 | |||
註1. 顯示圖形的HTML是: | |||
例:我要顯示這張小圖→ | |||
假設我已把這張叫做「INDEX_LOGOME2.GIF」的圖上傳 放到我的http://www.liu-may.com網站空間的「img」裡, | |||
所以圖的絕對路徑位置是「http://www.liu-may.com/img/INDEX_LOGOME2.GIF」 | |||
那麼要顯示這張圖的HTML寫法就是↓ | |||
註2. 超連結的HTML是:名稱 | |||
target="_blank" 表示超連結開啟方式是「開在新視窗 」 | |||
例:我想要超連結到「奇摩」,並且開在新視窗,而奇摩的網址是「http://tw.yahoo.com」 | |||
那麼這段超連結的HTML寫法是: | |||
奇摩 |
滑鼠移入就會停止的跑馬燈 | ||
範例: |
| |
寫法: | ||
【說明】 | ||
onMouseOver="this.stop()" 表示滑鼠移入〝範圍區〞既「停止」 | ||
onMouseOut="this.start()" 表示滑鼠離開便「跑動」 | ||
在stop與start後面的『 ( 』與『 ) 』,是鍵盤上數字健9與0上方的那個括弧符號,不是數字〝零〞喲 ^.^ | ||
PS:以上跑馬燈 整段HTML要改的只有〝要跑的文字〞 ^_^ |
本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣 授權條款授權.
0 意見:
張貼留言