網站建設中，在默認狀態(tài)下，鼠標移過鏈接則顯示為箭頭樣式，如果鏈接顯示為按鈕樣式，我們還可以把光標設計為手形樣式，這樣能夠提高用戶使用體驗。
【操作步驟】
第1步，構建網頁結構，在<body>標簽中輸入以下內容：
<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="#">移動</a></li></ul>
第2步，規(guī)劃整個頁面的基本顯示屬性以及統(tǒng)一所有元素的默認樣式。
* { margin:10px 0 0 10px; padding:0px;}body {
font-size:14px;
font-family:"宋體";}
第3步，在制作網頁時，定義水平顯示的導航菜單樣式。在ul類型選擇器中清除列表項目符號，通過li選擇器讓所有列表項并列顯示，通過添加左側邊界2像素，在網頁設計時，實現列表項目之間留有一點距離。定義a元素為塊顯示，設計背景色為亮藍色，通過固定高和寬設置方形樣式，利用line-height屬性實現文本垂直居中，清除默認的下劃線樣式，設置字體為白色。
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屬性定義多個光標樣式類。
.help { cursor:help;}
.text { cursor:text;}.wait { cursor:wait;}
.sw-resize { cursor:sw-resize;}
.crosshair { cursor:crosshair;}
.move { cursor:move;}
提示：cursor是CSS2.0定義的一個屬性，具體用法如下：
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步，把這些樣式類綁定到列表項目中包含的鏈接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">移動</a></li>
</ul>
當前文章標題：在網頁設計中定義鼠標指針樣式
當前URL：http://m.supportcoffeeroasters.com/news/wzzz/3079.html
上一篇：如何在網頁設計時定義已訪問樣式
下一篇：在網頁設計中定義菜單樣式
