本文引用自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) 人氣()

▲top
本文引用自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) 人氣()

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

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

▲top

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

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

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

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

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

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

▲top

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

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

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

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

▲top

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

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

▲top
本文引用自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) 人氣()

▲top
本文引用自swei5588 - 【教學】如何在痞客邦上傳照片＆發表新文章
 

 



本來應該是輪不到我來寫教學文章的，


但是這次有太多原本奇摩部落格的朋友搬到痞客邦


界面比較不熟悉，我已經使用二年了做個經驗分享


有關搬家的文章請參考天生一對寶的告別奇摩轉往痞客邦期待在相會  


1


首先介紹上傳照片，要先進入管理後台


點選部落格旁邊的相簿，再點右上角的相片/影音上傳


 


2


因為現在實在太多人使用痞客邦導致系統不是很穩定


很多人反應使用最左邊的網頁上傳模式（新）要傳很久


我個人一直習慣用中間網頁上傳模式上傳照片比較沒問題


 


3


第一次上傳照片的人要先建立新相簿（依個人喜好命名）


有建立過相簿的直接按選取檔案


 


4


找到自己放要上傳的照片資料夾，可以一次選取多個檔案


選好後按開啟


 


6


選擇要放的相簿


 


5


按開始上傳或是上傳檔案並儲存都可以


之後就完成照片上傳了，應該很簡單吧


 


7


接著介紹怎麼發表一篇新文章


一樣在管理後台->部落格->發表新文章


 


8


接著把剛剛上傳的照片叫進來（我習慣看照片說故事）


按插入相簿影音/照片


 


9


之後再選插入圖片


 


10


選擇剛剛上傳的相簿或是其他已經上傳的相簿


 


11


圖示大小可以自己試看看，剛開始建議選中(不超過600)


 


12


把想放進文章的照片點一下，會被選取到


全部選好後再按送出


 


13


之後照片就會全不進來了，記得如果有直幅照片要事先轉向


然後就可以像一般的方式寫文章了(照片旁邊點一下按enter就可以增加空白行了)


另外痞客邦有自動儲存功能，所以不怕電腦當機或停電


14


寫完文章要發表前有幾個地方要注意一下


第一個是文章日期，按一下現在可以變成現在時間


也可以點裡面的日期時間修改，如果改成未來時間就變成預約發文


當時間到達設定時間會自動打開文章


 


補充一點，痞客邦是可以改變文章內的字體和大小的


就在上層的功能裡，如果要全篇更改只要CTRL+A全選


再選擇喜歡的字體和大小


 


 


15  


建議標籤按下去會有一些關鍵字出現，如果不符合需要可以自己打


當然也可都不打


但是全站分類就一定要有，可以和個人分類連結


如果都沒有問題，就可以按下發表文章


這樣是不是很簡單，相信有用過其他部落格應該都能很快上手


 


如果覺得寫得還不錯，麻煩順便按個推薦


也歡迎分享和引用，要分享到FB也歡迎





(繼續閱讀...)

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

▲top
arrow_357.gif
本文引用自weimicozoe1216 - 語法｜各式框框語法

 

 



(繼續閱讀...)

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

▲top
1 2
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲，請立即離開。

已滿十八歲者，亦請勿將內容提供給未成年人士。