经常看到一些网站上有比较漂亮的图片导航菜单，但文字又不是图片的一部份。本文为大家介绍使用CSS来实现图片导航菜单。


来看如下效果菜单:

 

以下是实例源码的HTML代码部分:

<ul class="nav">
 <li class="home"><a href="#link">home</a></li>
 <li class="about"><a href="#link">about</a></li>
 <li class="work"><a href="#link">work</a></li>
</ul>
以下是样式表CSS声明：

.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef;}
 .nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px;}
 li.home {background:url(img/nav-home.gif) top left no-repeat;}
  li.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
 li.about {background:url(img/nav-about.gif) top left no-repeat;}
  li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
 li.work {background:url(img/nav-work.gif) top left no-repeat;}
  li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat;}
  .nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none;}
  .nav li a:hover {color:#C00;}

把二部分组合起来,一个漂亮的图片导航菜单就出来了...

如有需要,直接复制可使用.不过注意改自己的图片地址

欢迎继续访问网站制作教程网...