Web标准：七、横向导航菜单

Web标准：七、横向导航菜单

知识点：

1.横向列表菜单

2.用图片美化的横向导航

3.css Sprites

 

1）横向列表菜单

可以在第四节课的基础上来实现横向导航菜单，只要给li一个float:left;即可。

注意：如果要在一级菜单下增加二级菜单，二级菜单需要加一个float:none;来去掉浮动，否则二级菜单也会浮动到一行上去了。

 

2）用图片美化的横向导航

给li的链接上加一个a标签，给a标签加上display:block;把它转换成块级元素，然后给a设置背景色或者图片使它更加美观。

这里用到了三张背景图片，一张是初始的样式，一张是滑过的hover样式，一张是给他一个选中的样式。

选中的样式需要单给他增加一个id来标记，命名为#current。

 

3）CSS Sprites技术

CSS Sprites在国内和多人叫CSS精灵或CSS雪碧，他是把网页中一些背景推按整合到一张图片文件中，再利用CSS背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

 

背景图片代码如下：

#menu ul li a{background:#ccc url(images/na_bg2.gif) 0 0 no-repeat;}

说明：1.url()里面是图片的地址，后面跟的参数第一个表示距左多少，第二个表示据上多少。no-repeat表示向哪个方向重复（repeat-x或repeat-y或repeat），此时为不重复。

          2.CSS中值为0的可以不带单位，其他数值必须带单位（line-height、zoom、z-index除外）

          3.定位图片位置的参数是以图片的左上角为圆点的，所以如果是向左的距离，会使用正数（例10px）；如果是向上的距离，会用负数（-10px之类的）。

例子：使用的图片

引用图片中间位置的CSS样式（此图片高150px）：

 

展示效果：