PIXNET Logo登入

霝兒收藏屋

跳到主文

歡迎光臨霝兒收藏屋
這個小格擺放的全都是霝兒四處收集來的
資訊、圖卡、文章、圖框、網頁素材等...
是霝兒的寶藏倉庫
(留言煩請移駕主格)

部落格全站分類：收藏嗜好

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 10月 30 週三 201315:54

  • 【HTML語法】跑馬燈 (MARQUEE) 語法的詳細教學－含全部屬性用法

本文引用自ru6854 - 【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) 語法的詳細教學－含全部屬性用法


 




(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(48)

  • 個人分類：語法教學
▲top
  • 10月 29 週二 201315:54

  • 跑馬燈 html 教學 2

本文引用自ru6854 - 跑馬燈 html 教學 2
 


 











































  一般的跑馬燈








滑鼠移入就會停止的跑馬燈                               


  左右來回彈的跑馬燈
  帶著圖形       與 超連結 一起跑的跑馬燈
哇！好多不一樣的跑馬燈喔~       ^.^
跑馬燈可以有很多變化，只要你了解一些關於跑馬燈的HTML語言...

跑馬燈的基楚HTML：
編輯網頁，打開原始碼                        






<html>
<head>
...<title>標題</title>
</head>

              <body>
...... 貼在這兒
</body>
              </html>









<marquee>要跑的文字或物件</marquee>          

HTML標籤語言通常是配對的，
跑馬燈是以 <marquee>開始，</marquee>結尾，
在標籤語言中間所包含的就是要〝跑〞的東西。
註 ：HTML中『 < 』 與 『 > 』符號，是鍵盤上的〝大於〞、〝 小於〞 那個符號， 不是注音符號中的 括弧 喔!
 























屬性
跑馬燈不只只能向左跑，還可以改變 方向、速度... 還有設定範圍的的寬高，只要在標籤中加上「屬性」就可控制。
加在那兒？
  <marquee 加在這>       要跑的文字 </marquee>
  註：加屬性前記得按一格「空白鍵」，       〝空格〞 是「屬性」與「屬性」間的分段，你可以任意組合使用。




























































 

 

 

屬 性 一 覽 表

屬         性
其         他 說 明
範         例
範         例 的 完 整 語 法
對齊 align="top" 齊上 top
居中 midden
齊下 botton 		 
方向 direction="up" 左 left
右 right
上 up
下 dun		 慢慢向上跑 <marquee direction="up"       height="50" scrollamount="1">
要跑的文字</marquee>
行為 behavior="altemate" 左右來回 alternate
進入後停止slide
反覆 scroll
左右來回彈
 <marquee behavior="alternate">
要跑的文字</marquee>
進入後停止 <marquee behavior="slide">
要跑的文字</marquee>
(備註：一般反覆scroll的指令不用寫，因為那是預設)
高 height="高的數字" (跑馬燈區域的高度)

寬 width="寬的數字"


 (跑馬燈區域的寬度)
速度 scrollamount="1"        中間的數字是
      「滑動步伐的寬」		       步伐寬1 步伐寬5 <marquee scrollamount="1">       要跑的文字</marquee>
<marquee scrollamount="5">       要跑的文字</marquee>
背景色
bgcolor="#0022FF"    		 "#0022FF"是HTML色碼，兩個       兩個為一組，由00~99,AA~FF所組成，代表紅R、綠G、藍B，
      數字越小越深，數字越大越亮。
      例：紅 #FF0000，綠       #00FF00，藍 #0000FF，黃        #FFFF00，紫 #9966CC，....。




























































圖片也可以跟著跑
在跑馬燈<marquee> 標籤開始       至</marquee>結尾，中間所包含的物件 都會跟著跑，包含文字、圖形、超連結...
範例：       圖       與 超連結 都可以夾帶一起跑  
寫法：







<marquee>
            <img src="圖形的http位置" width="圖寬"              height="圖高">
            < a href="超連結的網址" target="_blank">要超連結的文字</a>
            </marquee>

【說明】
註1. 顯示圖形的HTML是：<img       src="圖形的http位置">

　 　例：我要顯示這張小圖→
　　　　假設我已把這張叫做「INDEX_LOGOME2.GIF」的圖上傳 放到我的http://www.liu-may.com網站空間的「img」裡，
　　　　所以圖的絕對路徑位置是「http://www.liu-may.com/img/INDEX_LOGOME2.GIF」
　　　　那麼要顯示這張圖的HTML寫法就是↓
　　　　<img       src="http://www.liu-may.comimg/INDEX_LOGOME2.GIF ">
註2. 超連結的HTML是：<a       href="連結的http位置">名稱</a>
　　target="_blank"       表示超連結開啟方式是「開在新視窗 」
　　 　例：我想要超連結到「奇摩」，並且開在新視窗，而奇摩的網址是「http://tw.yahoo.com」
　　 　　　那麼這段超連結的HTML寫法是：
　　 　　　<a href="http://tw.yahoo.com"       target="_blank"> 奇摩       </a>


































滑鼠移入就會停止的跑馬燈

範例：







              滑鼠移入就會停止的跑馬燈                           

寫法：







<marquee onMouseOver="this.stop()"             onMouseOut="this.start()" height="50"             direction="up" scrolldelay="4" scrollamount="1">要跑的文字</marquee>

【說明】
onMouseOver="this.stop()" 表示滑鼠移入〝範圍區〞既「停止」
onMouseOut="this.start()" 表示滑鼠離開便「跑動」
在stop與start後面的『 ( 』與『 ) 』，是鍵盤上數字健9與0上方的那個括弧符號，不是數字〝零〞喲 ^.^ 
PS：以上跑馬燈 整段HTML要改的只有〝要跑的文字〞 ^_^

 文章取自:http://www.liu-may.com/notebook/html/01marquee.htm#3



(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(22)

  • 個人分類：語法教學
▲top
  • 10月 25 週五 201317:10

  • 跑馬燈 html 教學

本文引用自ru6854 - 跑馬燈 html 教學
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(14)

  • 個人分類：語法教學
▲top
  • 10月 23 週三 201313:44

  • 分享實用語法


本文引用自rita589768 - 分享實用語法
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(43)

  • 個人分類：語法教學
▲top
  • 10月 23 週三 201313:36

  • [技術] 如何用CSS調整部落格文章的段落行距和字級 (痞客邦Pixnet

寫作
本文引用自rita589768 - [技術] 如何用CSS調整部落格文章的段落行距和字級 (痞客邦Pixnet
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(30)

  • 個人分類：語法教學
▲top
  • 10月 23 週三 201313:32

  • 語法｜各式框框語法

arrow_357.gif
本文引用自rita589768 - 語法｜各式框框語法
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(31)

  • 個人分類：語法教學
▲top
  • 10月 23 週三 201313:29

  • 喵喵-點圖看大圖語法分享


本文引用自rita589768 - 喵喵-點圖看大圖語法分享
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(20)

  • 個人分類：語法教學
▲top
  • 10月 07 週一 201312:19

  • 學習基本簡單框架

模版框架模型總覽^^
本文引用自shanti6521 - 學習基本簡單框架
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(2) 人氣(44)

  • 個人分類：語法教學
▲top
  • 10月 07 週一 201312:17

  • 為文字加背景圖


本文引用自shanti6521 - 為文字加背景圖 相簿
 
 
(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(23)

  • 個人分類：語法教學
▲top
  • 9月 30 週一 201312:03

  • 教學~✿CSS 教學 > 字體 ✿~

本文引用自ru6854 - 教學~✿CSS 教學 > 字體 ✿~

 


http://www.1keydata.com/css-tutorial/tw/font.php


在 CSS 中常見的字體 (font) 屬性有以下幾種：



  • font-family

  • font-size

  • font-weight

  • font-style

  • font-variant

    每一個屬性在以下會有詳細地介紹：


    font-family


    font-family 屬性是用來設定字體的類別。





















    CSS 樣式 顯現結果

    p {font-family: verdana;}

    Font Family Verdana.

    p {font-family: arial;}

    Font Family Arial.

    p {font-family: impact;}

    Font Family Impact.


    font-size


    font-size 屬性是用來設定字體的大小。大小可以是以數字顯現 (絕對的或是相較的均可)，或是以下其中之一的值："xx-large"、 "x-large"、 "large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。





























    CSS 樣式 顯現結果

    p {font-size:9px;}

    字體大小為 9px。

    p {font-size:150%;}

    字體大小為 150%。

    p {font-size:0.8cm;}

    字體大小為 0.8 cm。

    p {font-size:small;}

    字體大小為 small。

    p {font-size:large;}

    字體大小為 large。


    font-weight


    font-weight 屬性是用來設定字體的厚度。厚度的設定值可以從 100 到 900 (900 是最厚的)。另外，我們也可以將厚度設定為 bold (厚)、bolder (更厚)、及 normal (正常)。


    以下舉幾個例子：





















    CSS 樣式 顯現結果

    p {font-weight: 100;}

    這是厚度 100。

    p {font-weight: 900;}

    這是厚度 900。

    p {font-weight: bold;}

    這是 bold 厚度。


    font-style


    font-style 屬性是用來設定字體是否為斜體字 (italic 或 oblique)。













    CSS 樣式 顯現結果

    p {font-style: italic;}

    這是斜體字。


    font-variant


    font-variant 屬性是用來設定文字是不是要以小型大寫 (small caps) 字體顯現。在小型大寫字體中，所有的字母都是大寫，可是字體是比一般大寫來得小。可能的值為 "small-caps" 和 "normal"。來看下面的例子：


    CSS 宣告，









    span {
      font-variant:small-caps;
    }

    以下的 HTML 碼，









    <span>initial in small caps</span> AND LATER IN LARGE CAPS.

    就會顯現出，









    initial in small caps AND LATER IN LARGE CAPS.





(繼續閱讀...)
文章標籤

小霝 發表在 痞客邦 留言(0) 人氣(19)

  • 個人分類：語法教學
▲top
12»

個人資訊

小霝
暱稱：
小霝
分類：
收藏嗜好
好友：
累積中
地區：

送你回格

文章分類

toggle 網頁素材 (12)
  • 閃圖 (3)
  • PC素材包 (46)
  • 小掛件 (51)
  • 可愛小圖示 (18)
  • 小動圖 (69)
  • PNG (101)
  • 桌布背景 (202)
  • Logo/圖框素材 (83)
  • 韓式背景/閃亮小卡 (68)
  • 精選素材 (562)
  • QQ表情圖 (229)
  • 分隔線 (122)
toggle 美圖素材 (3)
  • 手繪古裝 (25)
  • 精緻插畫 (445)
  • 美麗圖片 (352)
toggle 達人教學 (5)
  • 語法教學 (16)
  • 痞客邦小教學 (35)
  • 製作教學 (11)
  • 操作教學 (13)
  • PS/PC/U5教學 (41)
toggle Flash素材 (6)
  • flash轉換gif (5)
  • flash特效 (11)
  • 透明swf素材 (22)
  • flash源碼 (2)
  • swf圖片 (31)
  • flash掛件 (62)
toggle 美麗版型 (3)
  • 翔霏版面 (10)
  • 可愛游標 (6)
  • 陳墨版面 (5)
toggle 圖框創作 (3)
  • 現代框 (49)
  • 復古框 (11)
  • SWF圖框 (7)
toggle 資訊分享 (3)
  • 網路資訊 (24)
  • 好用軟體 (39)
  • 生活資訊 (157)
toggle 食譜分享 (3)
  • 陳妹妹美味料裡 (104)
  • 美味食譜 (37)
  • 陳妹妹西式烘焙 (16)
toggle 點我回家小卡 (1)
  • 寶貝培培作品 (11)
toggle 好文分享 (2)
  • 美文呢喃 (134)
  • 圖文創作 (99)
  • 未分類文章 (1)

快捷霝

背景樂

霝兒主格

選單

哈霝搖

最新文章

  • ▐ 販賣部屋の商品▐ Tea Time游標5款(附半透明)
  • ▐ 販賣部屋の商品▐ 手繪小玩意5入(什麼都有/什麼都不奇怪)
  • 雲兒の框 ღ 想你
  • 雲兒朵朵の框 ღ 醉紅顏
  • 雲兒の框 ღ 暗香
  • 雲兒朵朵の框 - 仙塵瑤
  • 雲兒の框 ღ 寧月
  • 雲兒自用黑底女圖框
  • 菜菜和飯飯QQ表情
  • 綜合韓版動圖

動態訂閱

誰來我家

參觀人氣

  • 本日人氣：
  • 累積人氣：