經(jīng)常在網(wǎng)上沖浪的朋友是否曾注重到有些網(wǎng)站的鼠標不是規則的斜向上箭頭的外形,而是十字形,或者是向左的箭頭,或者是個(gè)問(wèn)號等等。當你想在網(wǎng)頁(yè)的不同位置讓鼠標顯示不同外形,以體現不同的功能區;當你想讓你的網(wǎng)站體現與眾不同的風(fēng)格時(shí),考慮一下在鼠標樣式上下功夫吧。其實(shí)鼠標樣式的用途還是極為廣泛的,那么怎樣才能實(shí)現鼠標的不同樣式呢? 啟動(dòng)Dreamweaver,打開(kāi)你要應用鼠標樣式的網(wǎng)頁(yè),在主窗口中選擇Text下拉菜單,再選擇CSS Style子菜單中的New Style命令新建樣式表。(注:假如你的網(wǎng)頁(yè)中已經(jīng)存在樣式表,可以選擇CSS Styles Edit Style Sheet編輯樣式表。) 此時(shí)彈出New Style對話(huà)框。其中Type項有三個(gè)單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定義樣式,樣式名以圓點(diǎn)開(kāi)頭;Use CSS Selector是使用CSS選擇器,里邊包含四個(gè)超鏈接樣式
a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定義HTML系統標簽的樣式,如abodybr等等。假設我們只對該頁(yè)面的超鏈接設置鼠標樣式,這里選擇Redefine HTML Tag選項中的a標簽。下面的Define項選擇This Document Only。單擊OK按鈕。 彈出Style definition for 對話(huà)框,進(jìn)入超鏈接樣式設置。左邊的Category是樣式類(lèi)別,這里對其它項不作解釋?zhuān)覀冞x擇Extentions項??梢钥吹接疫匳isual Effect中的Cursor項,這就是設置鼠標樣式的要害項。單擊右邊的下拉菜單,選擇你所需要的鼠標樣式,單擊OK按鈕就可以了。 下面講一下各樣式的大致含義。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。
text:是平時(shí)鼠標移動(dòng)到文本上的樣式。
wait:是等待的效果。
default:是默認的那種效果。
help:是帶問(wèn)號的鼠標樣式。
e-resize:是向右的箭頭。
ne-resize:是向右上方的箭頭。
n-resize:是向上的箭頭。
nw-resize:是向左上方的箭頭。
w-resize:是向左的箭關(guān)。
sw-resize:是向左下的箭頭。
s-resize:是向下的箭頭。
se-resize:是向右下方的箭頭。
auto:是系統自動(dòng)的效果。
當然根據需要你也可以將樣式應用于其它標簽,或者單純的只應用于某一段文本。假如讀者對CSS代碼不生疏的話(huà),或許直接手寫(xiě)代碼更方便。非凡是,假如你想在不同的位置運用不同的鼠標樣式,或者不同的標簽使用不同的鼠標樣式。直接將樣式寫(xiě)在某個(gè)具體的標簽里邊就可以了。
方法是:<tag style=cursor:mouse_style>。其中tag是標簽名,mouse_style就是鼠標樣式,如hand/crosshair/text/wait等等。
下面舉個(gè)具體的實(shí)例以加深大家對鼠標樣式設置的理解。
<span style=cursor:hand> hand:是大家所熟悉的手型。< /span>
<span style=cursor:crosshair>crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。< /span>
<span style=cursor:text>text:是平時(shí)鼠標移動(dòng)到文本上的樣式。< /span>
<span style=cursor:nw-resize>nw-resize:是向左上方的箭頭</span>
< span style=cursor:w-resize>w-resize:是向左的箭關(guān)。< /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:是系統自動(dòng)的效果。< /span>
將上面這段代碼拷到你的網(wǎng)頁(yè)中,按F12預覽。將你的鼠標移到相應的文本上方,看看鼠標有什么變化?是不是以相應的樣式顯現了?< p="">
聯(lián)系客服