用Dreamweaver MX創(chuàng)造網(wǎng)頁(yè)鼠標(biāo)樣式-Dreamweaver教程
2024-09-12 12:30:23
供稿：網(wǎng)友
經(jīng)常在網(wǎng)上沖浪的朋友是否曾注重到有些網(wǎng)站的鼠標(biāo)不是規(guī)則的斜向上箭頭的外形，而是"十"字形，或者是向左的箭頭，或者是個(gè)問(wèn)號(hào)等等。當(dāng)你想在網(wǎng)頁(yè)的不同位置讓鼠標(biāo)顯示不同外形，以體現(xiàn)不同的功能區(qū)；當(dāng)你想讓你的網(wǎng)站體現(xiàn)與眾不同的風(fēng)格時(shí)，考慮一下在鼠標(biāo)樣式上下功夫吧。其實(shí)鼠標(biāo)樣式的用途還是極為廣泛的，那么怎樣才能實(shí)現(xiàn)鼠標(biāo)的不同樣式呢？
啟動(dòng)dreamweaver，打開(kāi)你要應(yīng)用鼠標(biāo)樣式的網(wǎng)頁(yè)，在主窗口中選擇text下拉菜單，再選擇css style子菜單中的new style命令新建樣式表。（注：假如你的網(wǎng)頁(yè)中已經(jīng)存在樣式表，可以選擇css styles edit style sheet編輯樣式表。）
此時(shí)彈出new style對(duì)話框。其中type項(xiàng)有三個(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系統(tǒng)標(biāo)簽的樣式，如a/body/br等等。假設(shè)我們只對(duì)該頁(yè)面的超鏈接設(shè)置鼠標(biāo)樣式，這里選擇redefine html tag選項(xiàng)中的a標(biāo)簽。下面的define項(xiàng)選擇this document only。單擊ok按鈕。
彈出style definition for 對(duì)話框，進(jìn)入超鏈接樣式設(shè)置。左邊的category是樣式類別，這里對(duì)其它項(xiàng)不作解釋，我們選擇extentions項(xiàng)?？梢钥吹接疫卾isual effect中的cursor項(xiàng)，這就是設(shè)置鼠標(biāo)樣式的要害項(xiàng)。單擊右邊的下拉菜單，選擇你所需要的鼠標(biāo)樣式，單擊ok按鈕就可以了。
下面講一下各樣式的大致含義。
hand：是大家所熟悉的手型。
crosshair：是十字型，就是小烏龜首頁(yè)所用的樣式。
text：是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。
wait：是等待的效果。
default：是默認(rèn)的那種效果。
help：是帶問(wèn)號(hào)的鼠標(biāo)樣式。
e-resize：是向右的箭頭。
ne-resize：是向右上方的箭頭。
n-resize：是向上的箭頭。
nw-resize：是向左上方的箭頭。
w-resize：是向左的箭關(guān)。
sw-resize：是向左下的箭頭。
s-resize：是向下的箭頭。
se-resize：是向右下方的箭頭。
auto：是系統(tǒng)自動(dòng)的效果。
當(dāng)然根據(jù)需要你也可以將樣式應(yīng)用于其它標(biāo)簽，或者單純的只應(yīng)用于某一段文本。假如讀者對(duì)css代碼不生疏的話，或許直接手寫(xiě)代碼更方便。非凡是，假如你想在不同的位置運(yùn)用不同的鼠標(biāo)樣式，或者不同的標(biāo)簽使用不同的鼠標(biāo)樣式。直接將樣式寫(xiě)在某個(gè)具體的標(biāo)簽里邊就可以了。
方法是：<tag style="cursor:mouse_style">。其中tag是標(biāo)簽名，mouse_style就是鼠標(biāo)樣式，如hand/crosshair/text/wait等等。
下面舉個(gè)具體的實(shí)例以加深大家對(duì)鼠標(biāo)樣式設(shè)置的理解。
<span style="cursor:hand"> hand：是大家所熟悉的手型。</span><br>
<span style="cursor:crosshair">crosshair：是十字型，就是小烏龜首頁(yè)所用的樣式。</span><br>
<span style="cursor:text">text：是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。</span><br>
<span style="cursor:wait">wait：是等待的效果。</span><br>
<span style="cursor:default">default：是默認(rèn)的那種效果。</span> <br>
<span style="cursor:help">help：是帶問(wèn)號(hào)的鼠標(biāo)樣式。</span><br>
<span||| style="cursor:e-resize">e-resize：是向右的箭頭。</span><br>
<span style="cursor:ne-resize">ne-resize：是向右上方的箭頭。</span><br>
<span style="cursor:n-resize">n-resize：是向上的箭頭。</span><br>
<span style="cursor:nw-resize">nw-resize：是向左上方的箭頭。</span><br>
<span style="cursor:w-resize">w-resize：是向左的箭關(guān)。</span><br>
<span style="cursor:sw-resize">sw-resize：是向左下的箭頭。</span><br>
<span style="cursor:s-resize">s-resize：是向下的箭頭。</span><br>
<span style="cursor:se-resize">se-resize：是向右下方的箭頭。</span><br>
<span style="cursor:auto">auto：是系統(tǒng)自動(dòng)的效果。</span>
將上面這段代碼拷到你的網(wǎng)頁(yè)中，按f12預(yù)覽。將你的鼠標(biāo)移到相應(yīng)的文本上方，看看鼠標(biāo)有什么變化？是不是以相應(yīng)的樣式顯現(xiàn)了？
感覺(jué)如何？親手去體驗(yàn)一下吧。希望小烏龜能帶給你不一樣的感覺(jué)！！
