蘋果菜單風(fēng)格：簡(jiǎn)潔、優(yōu)雅、圓潤(rùn)。這種設(shè)計(jì)風(fēng)格比較流行，本示例模仿蘋果風(fēng)格設(shè)計(jì)導(dǎo)航菜單樣式。

【操作步驟】

第1步，構(gòu)建網(wǎng)頁(yè)基本結(jié)構(gòu)。在本示例中構(gòu)建了一個(gè)無(wú)序列表結(jié)構(gòu)。

<div id="nav">

<ul>        

<li class="n01"><a href="#">index</a></li>        

<li class="n02"><a href="#">Store</a></li>        

<li class="n03"><a href="#">Mac</a></li>        

<li class="n04"><a href="#">iPod + iTunes</a></li>        

<li class="n05"><a href="#">iPhone</a></li>        

<li class="n06"><a href="#">Downloads</a></li>    

</ul>

</div>

第2步，設(shè)置標(biāo)簽?zāi)J(rèn)樣式。

html, body {    

height:100%;    

background:#fff;}body {    

font:12px "宋體", Arial, sans-serif;    

color:#333;

}

body, form, menu, dir, fieldset, blockquote, p, pre, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6 {    

padding:0;    

margin:0;}

ul, ol, dl {    

list-style:none;}

以上代碼中，首先設(shè)置了html和body樣式，然后統(tǒng)一常用標(biāo)簽的樣式，設(shè)置它們的邊界都為0，并清除列表結(jié)構(gòu)的項(xiàng)目符號(hào)。。

第3步，定義導(dǎo)航菜單樣式。

#nav {    

width:490px;    

height:38px;    

margin:15px 0 0 10px;

overflow:hidden;    

background:url(images/globalnavbg.png) no-repeat;}

#nav li, #nav li a {    

float:left;    

display:block;    

width:117px;    

height:38px;    

background:#fff;}#nav li a {    

width:100%;   

 text-indent:-9999px;    

background:url(images/globalnavbg.png) no-repeat 0 0;}

以上代碼中，首先定義了導(dǎo)航菜單包含框樣式，定義固定寬度和高度，設(shè)置背景圖，通過(guò)overflow: hidden聲明隱藏超出區(qū)域的內(nèi)容。設(shè)置列表項(xiàng)目和錨點(diǎn)浮動(dòng)顯示，實(shí)現(xiàn)并列顯示，設(shè)置display為塊顯示，同時(shí)為錨點(diǎn)設(shè)置背景圖像，通過(guò)text-indent屬性隱藏文字。

第4步，為每個(gè)列表項(xiàng)目定位背景圖像的顯示位置。

#nav .n01 { width:118px; }

#nav .n01 a:visited { background-position:0 -114px; }

#nav .n01 a:hover { background-position:0 -38px; }

#nav .n01 a:active { background-position:0 -76px; }

#nav .n02 a:link { background-position:-118px 0; }

#nav .n02 a:visited { background-position:-118px -114px; }

#nav .n02 a:hover { background-position:-118px -38px; }

#nav .n02 a:active { background-position:-118px -76px; }

#nav .n03 a:link { background-position:-235px 0; }

#nav .n03 a:visited { background-position:-235px -114px; }

#nav .n03 a:hover { background-position:-235px -38px; }

#nav .n03 a:active { background-position:-235px -76px; }

#nav .n04 a:link { background-position:-352px 0; }

#nav .n04 a:visited { background-position:-352px -114px; }

#nav .n04 a:hover { background-position:-352px -38px; }

#nav .n04 a:active { background-position:-352px -76px; }

#nav .n05 a:link { background-position:-469px 0; }

#nav .n05 a:visited { background-position:-469px -114px; }

#nav .n05 a:hover { background-position:-469px -38px; }

#nav .n05 a:active { background-position:-469px -76px; }

#nav .n06 a:link { background-position:-586px 0; }

#nav .n06 a:visited { background-position:-586px -114px; }

#nav .n06 a:hover { background-position:-586px -38px; }

#nav .n06 a:active { background-position:-586px -76px; }

從以上代碼可以看到，定義了6個(gè)樣式類，利用包含選擇器，為每個(gè)錨點(diǎn)定義不同偽類狀態(tài)下的樣式。

【拓展】在以用戶體驗(yàn)為中心的網(wǎng)頁(yè)設(shè)計(jì)時(shí)代，很多用戶會(huì)因?yàn)榇蜷_(kāi)網(wǎng)頁(yè)速度太慢而關(guān)閉網(wǎng)頁(yè)。網(wǎng)頁(yè)提速有很多的方法，其中一條就是減少HTTP請(qǐng)求。每一個(gè)網(wǎng)站都會(huì)用到圖片，當(dāng)一個(gè)網(wǎng)站有10張單獨(dú)的圖片，就意味著在瀏覽網(wǎng)站時(shí)會(huì)向服務(wù)器提出10次http請(qǐng)求來(lái)加載圖片。在CSS設(shè)計(jì)中，一般使用CSS Sprites技巧減少圖片請(qǐng)求的方法，該方法也稱之為CSS精靈。簡(jiǎn)單描述就是，將多張小圖片合成為一張大圖片，減少HTTP請(qǐng)求次數(shù)而達(dá)到網(wǎng)頁(yè)提速。

下面以淘寶網(wǎng)為例子，為大家講解下CSS Sprites是如何實(shí)現(xiàn)的。如果要在網(wǎng)頁(yè)上顯示“今日淘寶活動(dòng)”這個(gè)圖片。

實(shí)現(xiàn)代碼如下：

<div style="width:107px; height:134px; background:url(sprites.gif) no-repeat -133px -153px"></div>   

?width：要定位圖片的寬度。   

?height：要定位圖片的高度。CSS Sprites要求必須定義容器的大小，不然會(huì)顯示出錯(cuò)。

?background：url(sprites.gif)定義背景圖片的路徑，no-repeat定義背景不重復(fù)，-133px定義X坐標(biāo)的位置，-153px定義y坐標(biāo)的位置。

可能有人會(huì)不明白這個(gè)-133px和-153px是怎么來(lái)的，這個(gè)坐標(biāo)是小圖片在大圖片中的x坐標(biāo)和y左邊坐標(biāo)，如圖3.46所示。紅色點(diǎn)的坐標(biāo)是在大圖上x(chóng)坐標(biāo)為133px，y坐標(biāo)為153px。坐標(biāo)也可以用百分比表示，如50% 50%。有人會(huì)提出，為什么坐標(biāo)是正數(shù)，這里卻寫成了負(fù)數(shù)呢？

因?yàn)樵?a href="http://www.iy5y368.cn" target="_self" title="昆明網(wǎng)站制作" textvalue="設(shè)計(jì)網(wǎng)頁(yè)">設(shè)計(jì)網(wǎng)頁(yè)時(shí)用background定義背景圖片，默認(rèn)x、y坐標(biāo)是0、0。

所以要用-133px、-153px才能正確地顯示圖片。   

?CSS Sprites的優(yōu)點(diǎn)：可以減少HTTP的請(qǐng)求數(shù)，如10張單獨(dú)的圖片就會(huì)發(fā)出10次的HTTP請(qǐng)求，合成為一張大圖片，只會(huì)發(fā)出一次的HTTP請(qǐng)求，從而提高了網(wǎng)頁(yè)加載速度。   

?CSS Sprites的缺點(diǎn)：由于在網(wǎng)站建設(shè)時(shí)每次圖片改動(dòng)都要往這張圖片添加內(nèi)容，圖片的坐標(biāo)定位要很準(zhǔn)確，稍顯繁瑣。坐標(biāo)定位要固定為某個(gè)絕對(duì)值，因此會(huì)失去一些靈活性。CSS Sprites有優(yōu)點(diǎn)也有缺點(diǎn)。要不要使用，具體要看網(wǎng)頁(yè)以加載速度為主，還是以維護(hù)方便容易為主。