下
右
左
上
除了可在「編輯物件」的上、下、左、右這四個方向跑出說明文字外，同時也可以再變化顏色。Hint.css 預設了四組顏色，分別是「錯誤」的紅色，「警告」的橙色，「資訊」的藍色，以及「成功」的綠色。
文字、DIV、表格的TD以及圖片，都可以作用。請參考教學影音。
文字、DIV、表格的TD以及圖片，都可以作用。請參考教學影音。
影音教學
1.將下列css程式置放於<head>xxx</head>之間或是<body>之後。使用KompoZer編輯器，最好置於<
body>之後：
<link rel="stylesheet"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/hint.css-master/hint.css"></link>
2.使用 Html 語法：
<span class="hint--top" data-hint="從上邊跑出說明文">上</span>
<span class="hint--bottom" data-hint="從下邊跑出說明文">下</span>
<span class="hint--left" data-hint="從左邊跑出說明文">左</span><br>
<span class="hint--right" data-hint="從右邊跑出說明文">右</span>
<span class="hint--bottom" data-hint="從下邊跑出說明文">下</span>
<span class="hint--left" data-hint="從左邊跑出說明文">左</span><br>
<span class="hint--right" data-hint="從右邊跑出說明文">右</span>
3.加入背景色，請把下列代碼加入於class="xxx"裡面：
紅色：hint--error
橙色：hint--warning
藍色：hint--info
綠色：hint--success
example: class="hint--top hint--error"，就以紅色背景在上方↖跑出來。
橙色：hint--warning
藍色：hint--info
綠色：hint--success
example: class="hint--top hint--error"，就以紅色背景在上方↖跑出來。
4.圖片的補充說明語法：
<span class="hint--top" data-hint="圖片的補充說明"><img
src="xx"></span><br>
原始語法出處：Hint.css
老師，這篇的影音教學在哪呢?我點不開
回覆刪除ok了
刪除