在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，很多鏈接放在一起，就可以組成菜單，菜單是網(wǎng)站的導(dǎo)航中心，在每個(gè)頁(yè)面都會(huì)看見它，因此設(shè)計(jì)鏈接樣式，以及導(dǎo)航菜單樣式就成為網(wǎng)頁(yè)設(shè)計(jì)中很重要的組成部分。
菜單樣式風(fēng)格不一、種類繁多，頁(yè)面該用什么樣式，這個(gè)需要結(jié)合網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。之前曾經(jīng)介紹了按鈕樣式，下面就以按鈕樣式為基礎(chǔ)，設(shè)計(jì)一個(gè)水平顯示的菜單樣式。
【操作步驟】
第1步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)，在<body>標(biāo)簽中輸入以下內(nèi)容：
<div>
<ul>
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">國(guó)內(nèi)新聞</a></li>
<li><a href="#">體育新聞</a></li>
<li><a href="#">國(guó)際新聞</a></li>
<li><a href="#">娛樂新聞</a></li>
<li><a href="#">財(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è)鏈接，可以看到，無(wú)序列表結(jié)構(gòu)呈現(xiàn)垂直顯示，并帶有項(xiàng)目符號(hào)，每個(gè)項(xiàng)目以縮進(jìn)呈現(xiàn)。
第2步，定義網(wǎng)頁(yè)基本屬性，設(shè)置列表默認(rèn)樣式，清除項(xiàng)目符號(hào)，并讓菜單文本居中顯示。
body { margin:0px;
padding:0px;
font-size:16px;
font-family:"宋體";
}div { margin:10px auto auto 10px;}ul { list-style-type:none;
text-align:center;}li { float:left; margin-left:5px;}
在以上代碼中，首先定義了頁(yè)面邊界為0，清除頁(yè)邊距，統(tǒng)一字體大小為16像素，字體類型為宋體，為div元素定義左右margin為auto，上下為10像素。
第3步，定義按鈕樣式。
a:link, a:visited {/*鏈接正常狀態(tài)、被訪問(wèn)過(guò)的樣式*/
color: #000;
display:block;
width:100px;
height:20px;
line-height:20px;
padding:4px 10px 4px 10px;
background-color: #ffd8db;
text-decoration: none;
border-top: 1px solid #ece0e0; /*邊框?qū)崿F(xiàn)陰影效果*/
border-left: 1px solid #ece0e0;
border-bottom: 1px solid #636060;
border-right: 1px solid #636060;}a:hover {/*鼠標(biāo)經(jīng)過(guò)時(shí)的鏈接*/
color:#821818; /*改變文字顏色*/
padding:5px 8px 3px 12px; /*改變文字位置*/
background-color:#e2c4c9; /*改變背景色*/
border-top: 1px solid #636060; /*邊框變換，實(shí)現(xiàn)“按下去”的效果*/
border-left: 1px solid #636060;
border-bottom: 1px solid #ece0e0;
border-right: 1px solid #ece0e0;}
在上面代碼中定義鏈接在默認(rèn)狀態(tài)下顯示黑色，頂部邊框線和左側(cè)邊框線為淺色效果，而右側(cè)和底部邊框線顏色為深色。當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，則重新設(shè)置四邊邊框線顏色，把上下和左右邊框線顏色調(diào)換，這樣利用錯(cuò)覺就設(shè)計(jì)出了一個(gè)凸凹立體效果。
提示：網(wǎng)頁(yè)設(shè)計(jì)立體樣式的技巧就是借助邊框樣式的變化（主要是顏色的深淺變化）來(lái)模擬一種凸凹變化的過(guò)程，即營(yíng)造一種立體變化效果。使用CSS設(shè)計(jì)立體效果的3種技巧如下。
?利用邊框線的顏色變化來(lái)制造視覺錯(cuò)覺。可以把右邊框和底部邊框結(jié)合，把頂部邊框和左邊框結(jié)合，利用明暗色彩的搭配來(lái)設(shè)計(jì)立體變化效果。
?利用鏈接背景色的變化來(lái)營(yíng)造凸凹變化的效果。鏈接的背景色可以設(shè)置相對(duì)深色效果，以營(yíng)造凸起效果，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，再定義淺色背景來(lái)營(yíng)造凹下效果。
?利用環(huán)境色、字體顏色（前景色）來(lái)烘托這種立體變化過(guò)程。
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中定義菜單樣式
當(dāng)前URL：http://www.iy5y368.cn/news/wzzz/3080.html
