網域查詢: www.
返回首頁

Dreamweaver打造多彩文字鏈接-高級鏈接樣式

時間:2010-02-11 13:02來源: 作者: 點擊:
四、 高級鏈接樣式。通過組合應用上面介紹的技術,我們還可以創作出更復雜的文字鏈接樣式,下面我們介紹三個例子。1、 定義塊狀鏈接。首先給鏈接增加一個背景色,如圖十八;
  

四、 高級鏈接樣式。 通過組合應用上面介紹的技術,我們還可以創作出更復雜的文字鏈接樣式,下面我們介紹三個例子。 1、  定義塊狀鏈接。首先給鏈接增加一個背景色,如圖十八;

"
再為文字鏈接增加四邊框即可實現平面塊狀文字鏈接,如圖十九;

" 2、  定義按鈕狀文字鏈接。改變邊框的樣式,定義Border-Style為outset,如圖二十;

"
定義Box選項中的Width和Height可以定義按鈕的寬和高,定義Padding為2pix可以使鏈接文字與按鈕四周有2pix的間距,如圖二十一;

" 3、  定義特效文字鏈接。CSS樣式表中還包含了一組特效濾鏡,我們可以再結合濾鏡與前邊的參數創建特殊的鏈接樣式。本例中我創建了一個使用Blur濾鏡的文字鏈接,並帶有邊框效果。如圖二十二;

"
4、 定義靜態背景切換的效果。本例是通過對鏈接文字普通狀態和Hover狀態設定不同的背景圖片來實現背景切換的效果。見下圖︰

"

5、 動態背景切換的效果。此效果與上例基本一樣,只是在Hover狀態定義了一個動態Gif圖片背景。而且這個圖片需要一點技巧就是設定循環為一遍,並在最後添加一個幀,設定幀的時間為一個較大的值,如10000。這樣可以使動畫執行一邊後就停止。為改善效果執行時的速度,我們還需要在Dreamweaver中增加了一個Preload /doc/webpage/images/images行為。這需要打開行為面板,並添加Preload /doc/webpage/images/images行為,如圖︰



我們可以把最後兩種鏈接樣式所需要用到的四張圖片都預先載入,如下圖︰"



五、" 總結 我就介紹這麼多鏈接樣式,配合設置鏈接文字的hover狀態,可以實現非常漂亮的效果,具體的頁面瀏覽請看這里,希望朋友們根據上面的思路,組合創造出更多地鏈接文字樣式。記住,樣式表就好比網頁制作中具有寶藏的一個冰山,今天我們只是揭開了冰山小小的一個角落,更多的寶藏等著你去挖掘。朋友們有任何相關的問題可以到http://www.blueidea.com/bbs 提出和討論。
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
最新評論 查看所有評論
發表評論 查看所有評論
請自覺遵守互聯網相關的政策法規,嚴禁發佈色情、暴力、反動的言論。
評價:
表情:
用戶名: 密碼: 驗證碼:
推薦內容