在網(wǎng)頁設計中定義鼠標指針樣式

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

【操作步驟】

第1步,構建網(wǎng)頁結(jié)構,在<body>標簽中輸入以下內(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="#">移動</a></li></ul>

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

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

font-size:14px;    

font-family:"宋體";}

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

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>

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:0871-63535511(點擊可一鍵撥號)