網(wǎng)站建設(shè)中，在默認(rèn)狀態(tài)下，鼠標(biāo)移過(guò)鏈接則顯示為箭頭樣式，如果鏈接顯示為按鈕樣式，我們還可以把光標(biāo)設(shè)計(jì)為手形樣式，這樣能夠提高用戶使用體驗(yàn)。
【操作步驟】
第1步，構(gòu)建網(wǎng)頁(yè)結(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è)頁(yè)面的基本顯示屬性以及統(tǒng)一所有元素的默認(rèn)樣式。
* { margin:10px 0 0 10px; padding:0px;}body {
font-size:14px;
font-family:"宋體";}
第3步，在制作網(wǎng)頁(yè)時(shí)，定義水平顯示的導(dǎo)航菜單樣式。在ul類型選擇器中清除列表項(xiàng)目符號(hào)，通過(guò)li選擇器讓所有列表項(xiàng)并列顯示，通過(guò)添加左側(cè)邊界2像素，在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，實(shí)現(xiàn)列表項(xiàng)目之間留有一點(diǎn)距離。定義a元素為塊顯示，設(shè)計(jì)背景色為亮藍(lán)色，通過(guò)固定高和寬設(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>
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中定義鼠標(biāo)指針樣式
當(dāng)前URL：http://m.ww44088.com/news/wzzz/3079.html
