自訂超連結底線的動畫效果

郭泓志單眼皮關島劉謙清境

自訂超連結底線的動畫效果
自訂超連結底線的動畫效果在 Dreamweaver 裡雖然沒辦法直接設定有動畫效果的超連結底線, 不過只要準備好 gif 動畫素材, 利用簡單的 CSS 語法就能輕鬆完成了。改用動畫效果的超連結底線瀏覽器 IE7 IE6 Netscape 8 Firefox Mozilla Opera 8 是否支援 ○ ○ ○ ○ ○ ○ step 1 在網頁中的 <head> 標籤內, 找到原本設定的連結樣式 a:link、a:hover 語法。我們將設定新的連結樣式, 請先刪除此段語法。 step 2 我們定義 1 個新的標籤選取器樣式, 命名為 s1, 請輸入以下語法, 設定滑鼠未移到超連結時的樣式。 .s1{ background: url(ani.gif) repeat-x ←指定背景圖檔(在此為"ani.gif")、 bottom; ←重複方向與位置 padding-left: 4px; ←設定文字與圖檔的左間距 padding-right: 4px; ←設定文字與圖檔的右間距 padding-bottom: 6px; ←設定文字與圖檔的下方間距 color: #ffffff; ←文字色彩 text-decoration: none; ←設定為無底線 } step 3 接著我們以 s1:hover 語法, 設定滑鼠移到超連結的樣式, 請再輸入以下語法。 .s1:hover { color: #669900; ←文字色彩 } TIP：此步驟我們僅改變顏色樣式, 你也可以使用 "background: url(圖檔) repeat-x bottom" 語法, 置換其它圖片製作另一種效果。 step 4 語法輸入完成後, 請在 <body> 標籤內使用 class="s1" 語法, 將加入超連結的文字套用我們設定的標籤選取器。您可以按下F12鍵 , 開啟瀏覽器預覽效果。 <p> <a class="s1" href="#" >北部人氣景點</a> <a class="s1" href="#" >中部經典路線</a> <a class="s1" href="#" >東部推薦行程</a> <a class="s1" href="#" >南部必玩景點</a> ●語法解密● ◎背景圖片 (background: url)：我們插入文字背景圖片的語法為：background: url(圖檔) repeat-x bottom, 其中 background:url 後方以括號填入圖檔檔名；隔 1 個半形空格輸入 repeat-x , 表示圖檔以水平位置重複顯示；再間隔 1 個半形空格輸入 bottom 指定圖檔出現在文字下方。本範例使用的圖檔是我們事先製作好的動態圖檔, 超連結底線就變成有動畫效果了。您也可以副標名如 jpg、gif、bmp 的靜態圖檔, 將超連結底線替換成任何您想設定的圖案。 ◎邊距 (padding) ：要調整文字與圖片的距離, 則利用 padding 語法加上 top、left、right、bottom 等位置,指定特定方向的樣式。以本單元為例, 假設未使用 padding 語法調整底線圖片的距離, 圖片就會壓在超連結文字上面。 .s1{ background: url(ani.gif) repeat-x bottom; color: #ffffff; text-decoration: none; } 未使用 padding 語法的呈現結果我們加上 padding-bottom 語法, 調整文字與底線圖片的下方邊距： padding-bottom: 6px 調整文字與底線圖片的下方邊距再觀察底線圖片的左右兩邊, 你會發現圖片的邊緣不完整, 因此我們利用 padding-left 與 paddingright 語法, 再調整左右兩邊的距離。 padding-left: 4px; padding-right: 4px; 調整文字與底線圖片左右兩邊的距離每次使用時, 都必須依據圖片的大小, 來指定像素的距離, 調整的過程最好能隨時按下鍵預覽調整的結果。
本文選錄自《Dreamweaver 搞不定的網頁設計效果 - CSS 關鍵救援密碼》