經常在網路上衝浪的朋友是否曾注意到有些網站的滑鼠不是規則的斜向上箭頭的形狀,而是十字形,或是向左的箭頭,或是個問號等等。當你想在網頁的不同位置讓滑鼠顯示不同形狀,以體現不同的功能區;當你想讓你的網站體現與眾不同的風格時,考慮一下在滑鼠樣式上下功夫。其實滑鼠樣式的用途還是極為廣泛的,那麼怎樣才能實現滑鼠的不同樣式呢?啟動Dreamweaver,打開你要應用滑鼠樣式的網頁,在主視窗中選擇Text下拉選單,再選擇CSS Style子選單中的New Style指令新建樣式表。 (註:如果你的網頁中已經存在樣式表,可以選擇CSS Styles Edit Style Sheet編輯樣式表。) 此時彈出New Style對話框。其中Type項目有三個單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自訂樣式,樣式名稱以圓點開頭;Use CSS Selector是使用CSS選擇器,裡麵包含四個超連結樣式
a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定義HTML系統標籤的樣式,如abodybr等等。假設我們只對該頁面的超連結設定滑鼠樣式,這裡選擇Redefine HTML Tag選項中的a標籤。下面的Define項目選擇This Document Only。單擊OK按鈕。 彈出Style definition for 對話框,進入超連結樣式設定。左邊的Category是樣式類別,這裡對其它項目不作解釋,我們選擇Extentions項目。你可以看到右邊Visual Effect中的Cursor項,這就是設定滑鼠樣式的關鍵項目。點選右邊的下拉選單,選擇你所需要的滑鼠樣式,點選OK按鈕就可以了。 下面講一下各樣式的大致意義。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁所用的樣式。
text:是平時滑鼠移動到文字上的樣式。
wait:是等待的效果。
default:是預設的那種效果。
help:是帶有問號的滑鼠樣式。
e-resize:是向右的箭頭。
ne-resize:是向右上方的箭頭。
n-resize:是向上的箭頭。
nw-resize:是向左上方的箭頭。
w-resize:是向左的箭關。
sw-resize:是向左下的箭頭。
s-resize:是向下的箭頭。
se-resize:是向右下方的箭頭。
auto:是系統自動的效果。
當然根據需要你也可以將樣式應用於其它標籤,或者單純的只應用於某一段文字。如果讀者對CSS程式碼不陌生的話,或許直接手寫程式碼更方便。特別是,如果你想在不同的位置運用不同的滑鼠樣式,或是不同的標籤使用不同的滑鼠樣式。直接將樣式寫在某個特定的標籤裡邊就可以了。
方法是:< tag style=cursor:mouse_style>。其中tag是標籤名,mouse_style就是滑鼠樣式,如hand/crosshair/text/wait等等。
下面舉個具體的實例以加深大家對滑鼠樣式設定的理解。
<span style=cursor:hand> hand:是大家所熟悉的手型。 < /span>
< span style=cursor:crosshair>crosshair:是十字型,就是小烏龜首頁所用的樣式。 < /span>
< span style=cursor:text>text:是平常滑鼠移到文字上的樣式。 < /span>
< span style=cursor:wait>wait:是等待的效果。 < /span>
< span style=cursor:default>default:是預設的那種效果。 < /span>
< span style=cursor:help>help:是帶有問號的滑鼠樣式。 < /span>
< span style=cursor:e-resize>e-resize:是向右的箭頭。 < /span>
< span style=cursor:ne-resize>ne-resize:是向右上方的箭頭。 < /span>
< span style=cursor:n-resize>n-resize:是向上的箭頭。 < /span>
< span style=cursor:nw-resize>nw-resize:是向左上方的箭頭。 < /span>
< span style=cursor:w-resize>w-resize:是向左的箭關。 < /span>
< span style=cursor:sw-resize>sw-resize:是向左下方的箭頭。 < /span>
< span style=cursor:s-resize>s-resize:是向下的箭頭。 < /span>
< span style=cursor:se-resize>se-resize:是向右下方的箭頭。 < /span>
< span style=cursor:auto>auto:是系統自動的效果。 < /span>
將上面這段程式碼拷到你的網頁中,按F12預覽。將你的滑鼠移到對應的文字上方,看看滑鼠有什麼變化?是不是以相應的樣式顯現了?