苹果菜单风格：简洁、优雅、圆润。这种设计风格比较流行，本示例模仿苹果风格设计导航菜单样式。

【操作步骤】

第1步，构建网页基本结构。在本示例中构建了一个无序列表结构。

<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步，设置标签默认样式。

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;}

以上代码中，首先设置了html和body样式，然后统一常用标签的样式，设置它们的边界都为0，并清除列表结构的项目符号。。

第3步，定义导航菜单样式。

#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;}

以上代码中，首先定义了导航菜单包含框样式，定义固定宽度和高度，设置背景图，通过overflow: hidden声明隐藏超出区域的内容。设置列表项目和锚点浮动显示，实现并列显示，设置display为块显示，同时为锚点设置背景图像，通过text-indent属性隐藏文字。

第4步，为每个列表项目定位背景图像的显示位置。

#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个样式类，利用包含选择器，为每个锚点定义不同伪类状态下的样式。

【拓展】在以用户体验为中心的网页设计时代，很多用户会因为打开网页速度太慢而关闭网页。网页提速有很多的方法，其中一条就是减少HTTP请求。每一个网站都会用到图片，当一个网站有10张单独的图片，就意味着在浏览网站时会向服务器提出10次http请求来加载图片。在CSS设计中，一般使用CSS Sprites技巧减少图片请求的方法，该方法也称之为CSS精灵。简单描述就是，将多张小图片合成为一张大图片，减少HTTP请求次数而达到网页提速。

下面以淘宝网为例子，为大家讲解下CSS Sprites是如何实现的。如果要在网页上显示“今日淘宝活动”这个图片。

实现代码如下：

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

•width：要定位图片的宽度。   

•height：要定位图片的高度。CSS Sprites要求必须定义容器的大小，不然会显示出错。

•background：url(sprites.gif)定义背景图片的路径，no-repeat定义背景不重复，-133px定义X坐标的位置，-153px定义y坐标的位置。

可能有人会不明白这个-133px和-153px是怎么来的，这个坐标是小图片在大图片中的x坐标和y左边坐标，如图3.46所示。红色点的坐标是在大图上x坐标为133px，y坐标为153px。坐标也可以用百分比表示，如50% 50%。有人会提出，为什么坐标是正数，这里却写成了负数呢？

因为在设计网页时用background定义背景图片，默认x、y坐标是0、0。

所以要用-133px、-153px才能正确地显示图片。   

•CSS Sprites的优点：可以减少HTTP的请求数，如10张单独的图片就会发出10次的HTTP请求，合成为一张大图片，只会发出一次的HTTP请求，从而提高了网页加载速度。   

•CSS Sprites的缺点：由于在网站建设时每次图片改动都要往这张图片添加内容，图片的坐标定位要很准确，稍显繁琐。坐标定位要固定为某个绝对值，因此会失去一些灵活性。CSS Sprites有优点也有缺点。要不要使用，具体要看网页以加载速度为主，还是以维护方便容易为主。