在網(wǎng)頁設(shè)計(jì)中定義鼠標(biāo)指針樣式

網(wǎng)站建設(shè)中,在默認(rèn)狀態(tài)下,鼠標(biāo)移過鏈接則顯示為箭頭樣式,如果鏈接顯示為按鈕樣式,我們還可以把光標(biāo)設(shè)計(jì)為手形樣式,這樣能夠提高用戶使用體驗(yàn)。

【操作步驟】

第1步,構(gòu)建網(wǎng)頁結(jié)構(gòu),在<body>標(biāo)簽中輸入以下內(nèi)容:

<ul>    

<li> <a href="#">幫助</a></li>    

<li> <a href="#">文本</a></li>    

<li> <a href="#" >等待</a></li>    

<li> <a href="#">斜箭頭</a></li>    

<li> <a href="#">十字</a></li>    

<li> <a href="#">移動(dòng)</a></li></ul>

第2步,規(guī)劃整個(gè)頁面的基本顯示屬性以及統(tǒng)一所有元素的默認(rèn)樣式。

* {    margin:10px 0 0 10px;    padding:0px;}body {    

font-size:14px;    

font-family:"宋體";}

第3步,在制作網(wǎng)頁時(shí),定義水平顯示的導(dǎo)航菜單樣式。在ul類型選擇器中清除列表項(xiàng)目符號(hào),通過li選擇器讓所有列表項(xiàng)并列顯示,通過添加左側(cè)邊界2像素,在網(wǎng)頁設(shè)計(jì)時(shí),實(shí)現(xiàn)列表項(xiàng)目之間留有一點(diǎn)距離。定義a元素為塊顯示,設(shè)計(jì)背景色為亮藍(lán)色,通過固定高和寬設(shè)置方形樣式,利用line-height屬性實(shí)現(xiàn)文本垂直居中,清除默認(rèn)的下劃線樣式,設(shè)置字體為白色。

ul {    list-style-type:none;

}li {    float:left;    

margin-left:2px;}a {    display:block;    

background-color:#3424ff;    

width:100px;    

height:30px;    

line-height:30px;    

text-align:center;    

color:#FFFFFF;    

text-decoration:none;}

第4步,利用CSS的cursor屬性定義多個(gè)光標(biāo)樣式類。

.help {    cursor:help;}

.text {    cursor:text;}.wait {    cursor:wait;}

.sw-resize {    cursor:sw-resize;}

.crosshair {    cursor:crosshair;}

.move {    cursor:move;}

提示:cursor是CSS2.0定義的一個(gè)屬性,具體用法如下:

cursor: auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url (url)

第5步,把這些樣式類綁定到列表項(xiàng)目中包含的鏈接a元素上即可。

<ul>    

<li> <a href="#" class="help">幫助</a></li>    

<li> <a href="#" class="text">文本</a></li>    

<li> <a href="#" class="wait">等待</a></li>

<li> <a href="#" class="sw-resize">斜箭頭</a></li>    

<li> <a href="#" class="crosshair">十字</a></li>    

<li> <a href="#" class="move">移動(dòng)</a></li>

</ul>

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))