- 相關(guān)推薦
如何利用dreamweaver制作鼠標(biāo)樣式
經(jīng)常在網(wǎng)上沖浪的朋友是否曾注意到有些網(wǎng)站的鼠標(biāo)不是規(guī)則的斜向上箭頭的形狀,而是十字形,或者是向左的箭頭,或者是個問號等等。當(dāng)你想在網(wǎng)頁的不同位置讓鼠標(biāo)顯示不同形狀,以體現(xiàn)不同的功能區(qū);當(dāng)你想讓你的網(wǎng)站體現(xiàn)與眾不同的風(fēng)格時,考慮一下在鼠標(biāo)樣式上下功夫吧。以下是小編為大家搜索整理的如何利用dreamweaver制作鼠標(biāo)樣式,希望能給大家?guī)韼椭?更多精彩內(nèi)容請及時關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
其實(shí)鼠標(biāo)樣式的用途還是極為廣泛的,那么怎樣才能實(shí)現(xiàn)鼠標(biāo)的不同樣式呢? 啟動Dreamweaver,打開你要應(yīng)用鼠標(biāo)樣式的網(wǎng)頁,在主窗口中選擇Text下拉菜單,再選擇CSS Style子菜單中的New Style命令新建樣式表。(注:如果你的網(wǎng)頁中已經(jīng)存在樣式表,可以選擇CSS Styles Edit Style Sheet編輯樣式表。) 此時彈出New Style對話框。其中Type項(xiàng)有三個單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定義樣式,樣式名以圓點(diǎn)開頭;Use CSS Selector是使用CSS選擇器,里邊包含四個超鏈接樣式:
a:active
a:hover
a:link
a:visited
Redefine HTML Tag是定義HTML系統(tǒng)標(biāo)簽的樣式,如abodybr等等。假設(shè)我們只對該頁面的超鏈接設(shè)置鼠標(biāo)樣式,這里選擇Redefine HTML Tag選項(xiàng)中的a標(biāo)簽。下面的Define項(xiàng)選擇This Document Only。單擊OK按鈕。 彈出Style definition for 對話框,進(jìn)入超鏈接樣式設(shè)置。左邊的Category是樣式類別,這里對其它項(xiàng)不作解釋,我們選擇Extentions項(xiàng)?梢钥吹接疫匳isual Effect中的Cursor項(xiàng),這就是設(shè)置鼠標(biāo)樣式的關(guān)鍵項(xiàng)。單擊右邊的下拉菜單,選擇你所需要的鼠標(biāo)樣式,單擊OK按鈕就可以了。 下面講一下各樣式的大致含義。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁所用的樣式。
text:是平時鼠標(biāo)移動到文本上的樣式。
wait:是等待的效果。
default:是默認(rèn)的那種效果。
help:是帶問號的鼠標(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)然根據(jù)需要你也可以將樣式應(yīng)用于其它標(biāo)簽,或者單純的只應(yīng)用于某一段文本。如果讀者對CSS代碼不陌生的話,或許直接手寫代碼更方便。特別是,如果你想在不同的位置運(yùn)用不同的鼠標(biāo)樣式,或者不同的標(biāo)簽使用不同的鼠標(biāo)樣式。直接將樣式寫在某個具體的標(biāo)簽里邊就可以了。
方法是:< tag style=cursor:mouse_style>。其中tag是標(biāo)簽名,mouse_style就是鼠標(biāo)樣式,如hand/crosshair/text/wait等等。
下面舉個具體的實(shí)例以加深大家對鼠標(biāo)樣式設(shè)置的理解。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁所用的樣式。
text:是平時鼠標(biāo)移動到文本上的樣式。
wait:是等待的效果。
default:是默認(rèn)的那種效果。
help:是帶問號的鼠標(biāo)樣式。
e-resize:是向右的箭頭。
ne-resize:是向右上方的箭頭。
n-resize:是向上的箭頭。
nw-resize:是向左上方的箭頭。
w-resize:是向左的箭關(guān)。
sw-resize:是向左下的箭頭。
s-resize:是向下的箭頭。
se-resize:是向右下方的箭頭。
auto:是系統(tǒng)自動的效果。
將上面這段代碼拷到你的網(wǎng)頁中,按F12預(yù)覽。將你的鼠標(biāo)移到相應(yīng)的文本上方,看看鼠標(biāo)有什么變化?是不是以相應(yīng)的樣式顯現(xiàn)了?
【如何利用dreamweaver制作鼠標(biāo)樣式】相關(guān)文章:
在Dreamweaver中利用CSS樣式表設(shè)置網(wǎng)頁04-16
Dreamweaver CC 2017如何切換界面樣式02-15
Dreamweaver如何利用層布局網(wǎng)頁07-19
Dreamweaver如何制作網(wǎng)頁設(shè)計(jì)07-02
Dreamweaver如何制作拖拽效果06-11