HTML和CSS标记为精灵naivgation图像

我试图得到一个效果，我可以有图片在所有从单一的精灵形象在左边的菜单我的导航链接旁边。我不确定我应该如何创建我的标记才能正确执行此操作。我希望整个图片和文字可以点击以访问网址。

可能的解决方案

将图像标记为AHREF链接左侧，并将其链接到同一个地方。
的AHREF链路上使用背景图片的边距，以腾出空间为它
使用span标签

代码

<ul id="sidenav"> 
    <li><a href="#" title="Home" class="active">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Dashboard</a></li> 
    <li><a href="#" title="Home">Account</a></li> 
</ul>

来源

2014-04-16 Jimmy

我觉得http://www.w3.org/wiki/CSS_background_images#Sprites答案你的问题。

他们使用的ID在<li> tag然后

#rss span{ background-position: -15px 0;} 

#photos span{background-position: -30px 0;} 

#links span{background-position: -45px 0;}

来源

2014-04-16 08:33:06 frountch

他们使用空跨度标签，这真的是最好的方法？ – Jimmy

不知道是否有一个正确的方法，但我不明白为什么这个可能是坏的。 – frountch

您可以检查这样的引导方式..这里是链接http://getbootstrap.com/components/

在那里，你可以检查自己做这件事情的方法。简单地说，你可以做folloing

<ul id="sidenav"> 
    <li><a href="yourlink">Link text <span class="icon-class"></span></a></li> 
    </ul>

在图标类定义从精灵图像的位置。

来源

2014-04-16 08:33:48 Zeeshan

HTML和CSS标记为精灵naivgation图像

回答

相关问题