本文引用自min0427 - 【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學-含全部屬性用法

  •  ◆跑馬燈的基本語法&執行預覽

<marquee>顯示內容</marquee>
歡迎光臨企鵝碎碎唸~

 ◆全部屬性的使用說明&執行預覽:
(1) WIDTH="數值"
說明: 設定跑馬燈的寬度(單位:像素/px),若不指定則預設為版面寬度
預覽: 1.不加屬性「WIDTH=" "
歡迎光臨企鵝碎碎唸~
1.
2.設定屬性「
WIDTH="500"
歡迎光臨企鵝碎碎唸~

(2) HEIGHT="數值"
說明: 設定跑馬燈的高度(單位:像素/px,若不指定則預設為顯示內容的高度
預覽: 1.不加屬性「HEIGHT=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
HEIGHT="30"
歡迎光臨企鵝碎碎唸~

(3) BEHAVIOR="屬性"
說明: 顯示內容的移動方式(省略時的預設值:SCROLL)
共有:不斷的由右循環至左/SCROLL、不斷的在左、右之間來回/ALTERNATE 以及 
共有:由右滑動至左(一次)/SLIDE 這三種方式
預覽: 1.不加屬性「BEHAVIOR=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
BEHAVIOR="SCROLL"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
BEHAVIOR="ALTERNATE"
歡迎光臨企鵝碎碎唸~

4.設定屬性「
BEHAVIOR="SLIDE"」 
歡迎光臨企鵝碎碎唸~

(4) DIRECTION="屬性"
說明: 顯示內容的移動方向(省略時的預設值:LEFT)
共有:往上/UP、往下/DOWN、往左/LEFT 以及 往右/RIGHT 這四個方向
預覽:
1.不加屬性「DIRECTION=" "」 
歡迎光臨企鵝碎碎唸~

2.分別設定屬性「DIRECTION="UP、DOWN、LEFT、RIGHT"
往左
往下  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 往上
往右
(5) SCROLLAMOUNT="數值"
說明: 顯示內容每次的移動距離(省略時的預設值:6px)
預覽: 1.不加屬性「SCROLLAMOUNT=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
SCROLLAMOUNT="6"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
SCROLLAMOUNT="0"(設為0的話,跑馬燈就完全不會移動了!)
歡迎光臨企鵝碎碎唸~

4.設定屬性「
SCROLLAMOUNT="30"
歡迎光臨企鵝碎碎唸~

(6) SCROLLDELAY="數值"
說明: 顯示內容每次移動的間隔時間(省略時的預設值:85毫秒/ms)
預覽: 1.不加屬性「SCROLLDELAY=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
SCROLLDELAY="85"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
SCROLLDELAY="300"
歡迎光臨企鵝碎碎唸~

4.設定屬性「
SCROLLDELAY="500"
歡迎光臨企鵝碎碎唸~

(7) LOOP="次數"
說明: 顯示內容的執行次數(省略時的預設值:無限多次),輸入「0」即代表執行無限多次
預覽: 1.不加屬性「LOOP=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
LOOP="0"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
LOOP="1"
歡迎光臨企鵝碎碎唸~

(8) ALIGN="屬性"
說明: 顯示內容的對齊位置(省略時的預設值:BOTTOM)
共有:置頂/TOP、置中/MIDDLE 以及 底部/BOTTOM 這三個位置
預覽: 1.不加屬性「ALIGN=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
ALIGN="BOTTOM"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
ALIGN="MIDDLE"
歡迎光臨企鵝碎碎唸~

4.設定屬性「
ALIGN="TOP"
歡迎光臨企鵝碎碎唸~

註:因為ALIGN屬性無法適用於全部的瀏覽器,故建議最好直接在顯示內容上作設定!

(9) HSPACE="數值"
說明: 左、右邊緣的空白空間(單位:像素/px,若不指定則預設為0px
預覽: 1.不加屬性「HSPACE=" "
歡迎光臨企鵝碎碎唸~

2.設定屬性「
HSPACE="0"
歡迎光臨企鵝碎碎唸~

3.設定屬性「HSPACE="30"
歡迎光臨企鵝碎碎唸~
(10) VSPACE="數值"
說明: 上、下邊緣的空白空間(單位:像素/px,若不指定則預設為0px
預覽: 1.不加屬性「VSPACE=" "
歡迎光臨企鵝碎碎唸~

2.設定屬性「
VSPACE="0"
歡迎光臨企鵝碎碎唸~

3.設定屬性「VSPACE="30"
歡迎光臨企鵝碎碎唸~
(11) BGCOLOR="顏色代碼"
說明: 設定跑馬燈的背景顏色(預設為白色/#FFFFFF 或 WHITE)
預覽: 1.不加屬性「BGCOLOR=" "」 
歡迎光臨企鵝碎碎唸~

2.設定屬性「
BGCOLOR="#FFFFFF"
歡迎光臨企鵝碎碎唸~

3.設定屬性「
BGCOLOR="#f9f7b3"
歡迎光臨企鵝碎碎唸~

備註: 跑馬燈的預設背景及空白空間顏色皆為「白色」,而顯示內容的文字部份則為「黑色」
上方的預覽是為了強調而特意加以更改!!


 ◆備 註:
您除了可以如文章最上方的跑馬燈一般,在顯示內容的地方加上文字、連結以及圖片之外
還可以將整個跑馬燈的程式碼套入表格之中來加以美化,作法如下:
1. 先下載或自己製作一張與跑馬燈大小相符合的邊框圖片
2. 將圖片裁剪成上、下、左、右四個部份
3. 如下面的表格將跑馬燈以及
上、下、左、右邊框的圖片分別插入表格之中就可以囉~

  插入上框
插入左框 插入跑馬燈 插入右框
插入下框




本文引用自tzoyiing - 【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學-含全部屬性用法

本文引用自ru6854 - 【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學-含全部屬性用法

    文章標籤

    教學

    全站熱搜

    鳳鳳幸福滿滿部落 發表在 痞客邦 留言(0) 人氣()


    留言列表

    發表留言