HTML/CSS图像导航栏

Question

我正在为我的网站制作导航栏。导航栏是一张图片，我想知道是否可以在CSS中分割图片的部分以链接到不同的页面。这可能吗？如果是这样，怎么样？

地图标记建议工作完美。谢谢！

Answer 1

您可以使用HTML映射标签，看http://www.w3.org/wiki/HTML/Elements/map

Answer 2

两种不同的方式做你想要什么：

• 一个image map（并没有真正使用CSS，虽然），或

• 使用正确的HTML markup+CSS sprites，是这样的：

  <ul class="nav"> 
      <li><a href="foo">Foo</a></li> 
      <li><a href="bar">Bar</a></li> 
      <li><a href="baz">Baz</a></li> 
  </ul> 
  

并将其与CSS background-position结合使用。

Answer 3

您应该尝试使用CSS图像精灵http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/进行导航。或者你可以使用图像映射，但我认为CSS sprites是一个更现代和标准的方法来做到这一点。