深圳網(wǎng)站制作公司接上篇文章繼續(xù)分享網(wǎng)頁(yè)設(shè)計(jì)時(shí)如何處理鏈接以及鏈接樣式的定義，在前面我們從理論實(shí)現(xiàn)做了分享，本文博納網(wǎng)絡(luò)將通過(guò)實(shí)例的形式幫助您設(shè)計(jì)CSS的鏈接樣式，以提高實(shí)戰(zhàn)技法和技巧，快速理解CSS鏈接屬性的應(yīng)用。
一、網(wǎng)站制作定義鼠標(biāo)指針樣式
在默認(rèn)狀態(tài)下，鼠標(biāo)移過(guò)鏈接則顯示為箭頭樣式，如果鏈接顯示為按鈕樣式，我們還可以把光標(biāo)設(shè)計(jì)為手形樣式，這樣能夠提高用戶使用體驗(yàn)。設(shè)計(jì)鼠標(biāo)樣式的效果如圖所示。
鼠標(biāo)樣式。
【操作步驟】
第1步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，在<body>標(biāo)簽中輸入以下內(nèi)容：
<ul>
<li><ahref="#">幫助</a></li>
<li><ahref="#">文本</a></li>
<li><ahref="#">等待</a></li>
<li><ahref="#">斜箭頭</a></li>
<li><ahref="#">十字</a></li>
<li><ahref="#">移動(dòng)</a></li>
</ul>
第2步，規(guī)劃整個(gè)頁(yè)面的基本顯示屬性以及統(tǒng)一所有元素的默認(rèn)樣式。
第3步，定義水平顯示的導(dǎo)航菜單樣式。在ul類型選擇器中清除列表項(xiàng)目符號(hào)，通過(guò)li選擇器讓所有列表項(xiàng)并列顯示，通過(guò)添加左側(cè)邊界2像素，實(shí)現(xiàn)列表項(xiàng)目之間留有一點(diǎn)距離。定義a元素為塊顯示，設(shè)計(jì)背景色為亮藍(lán)色，通過(guò)固定高和寬設(shè)置方形樣式，利用line-height屬性實(shí)現(xiàn)文本垂直居中，清除默認(rèn)的下劃線樣式，設(shè)置字體為白色。顯示效果如圖所示。
設(shè)置水平導(dǎo)航樣式
第4步，利用CSS的cursor屬性定義多個(gè)光標(biāo)樣式類。
提示：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)該屬性的取值說(shuō)明如表所示。
cursor取值說(shuō)明
第5步，把這些樣式類綁定到列表項(xiàng)目中包含的鏈接a元素上即可。
<ul>
<li><ahref="#"class="help">幫助</a></li>
<li><ahref="#"class="text">文本</a></li>
<li><ahref="#"class="wait">等待</a></li>
<li><ahref="#"class="sw-resize">斜箭頭</a></li>
<li><ahref="#"class="crosshair">十字</a></li>
<li><ahref="#"class="move">移動(dòng)</a></li>
</ul>
二、網(wǎng)站制作定義菜單樣式
很多鏈接放在一起，就可以組成菜單，菜單是網(wǎng)站的導(dǎo)航中心，在每個(gè)頁(yè)面都會(huì)看見(jiàn)它，因此設(shè)計(jì)鏈接樣式，以及導(dǎo)航菜單樣式就成為網(wǎng)頁(yè)設(shè)計(jì)中很重要的組成部分。菜單樣式風(fēng)格不一、種類繁多，頁(yè)面該用什么樣式，這個(gè)需要結(jié)合網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。深圳網(wǎng)頁(yè)制作在前面的文章中曾經(jīng)介紹了按鈕樣式，下面就以按鈕樣式為基礎(chǔ)，設(shè)計(jì)一個(gè)水平顯示的菜單樣式，示例效果如圖3.36所示。
設(shè)計(jì)菜單樣式
【操作步驟】
第1步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，在<body>標(biāo)簽中輸入以下內(nèi)容：
<div>
<ul>
<li><ahref="#">首頁(yè)</a></li>
<li><ahref="#">國(guó)內(nèi)新聞</a></li>
<li><ahref="#">體育新聞</a></li>
<li><ahref="#">國(guó)際新聞</a></li>
<li><ahref="#">娛樂(lè)新聞</a></li>
<li><ahref="#">財(cái)經(jīng)新聞</a></li>
</ul>
</div>整個(gè)菜單結(jié)構(gòu)以無(wú)序列表為基礎(chǔ)，使用<ul>和<li>標(biāo)簽配合，設(shè)計(jì)每個(gè)菜單項(xiàng)，在每個(gè)菜單項(xiàng)中包含一個(gè)鏈接，此時(shí)的顯示效果如圖3.37所示，可以看到，無(wú)序列表結(jié)構(gòu)呈現(xiàn)垂直顯示，并帶有項(xiàng)目符號(hào)，每個(gè)項(xiàng)目以縮進(jìn)呈現(xiàn)。
構(gòu)建列表結(jié)構(gòu)
第2步，定義網(wǎng)頁(yè)基本屬性，設(shè)置列表默認(rèn)樣式，清除項(xiàng)目符號(hào)，并讓菜單文本居中顯示。
在以上代碼中，首先定義了頁(yè)面邊界為0，清除頁(yè)邊距，統(tǒng)一字體大小為16像素，字體類型為宋體，為div元素定義左右margin為auto，上下為10像素。此時(shí)的顯示效果如圖3.38所示。
設(shè)置列表基本屬性
第3步，定義按鈕樣式。
在上面代碼中定義鏈接在默認(rèn)狀態(tài)下顯示黑色，頂部邊框線和左側(cè)邊框線為淺色效果，而右側(cè)和底部邊框線顏色為深色。當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，則重新設(shè)置四邊邊框線顏色，把上下和左右邊框線顏色調(diào)換，這樣利用錯(cuò)覺(jué)就設(shè)計(jì)出了一個(gè)凸凹立體效果，此時(shí)網(wǎng)頁(yè)的顯示效果如圖3.39所示。
設(shè)計(jì)立體按鈕樣式提示：設(shè)計(jì)立體樣式的技巧就是借助邊框樣式的變化（主要是顏色的深淺變化）來(lái)模擬一種凸凹變化的過(guò)程，即營(yíng)造一種立體變化效果。使用CSS設(shè)計(jì)立體效果的3種技巧如下。
1.利用邊框線的顏色變化來(lái)制造視覺(jué)錯(cuò)覺(jué)?？梢园延疫吙蚝偷撞窟吙蚪Y(jié)合，把頂部邊框和左邊框結(jié)合，利用明暗色彩的搭配來(lái)設(shè)計(jì)立體變化效果。
2.利用鏈接背景色的變化來(lái)營(yíng)造凸凹變化的效果。鏈接的背景色可以設(shè)置相對(duì)深色效果，以營(yíng)造凸起效果，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，再定義淺色背景來(lái)營(yíng)造凹效果。
3.利用環(huán)境色、字體顏色（前景色）來(lái)烘托這種立體變化過(guò)程。網(wǎng)站制作公司關(guān)于鏈接的鼠標(biāo)定義方式以及菜單樣式的實(shí)際操作案例就介紹到這里。下期博納網(wǎng)絡(luò)會(huì)就網(wǎng)站制作蘋果菜單樣式設(shè)計(jì)經(jīng)驗(yàn)進(jìn)行分享。
