html - 使用 CSS 的纯图像导航栏的最佳实践

Question

我想创建一个带有 ul 元素的导航栏，其中导航栏上的每个元素都是一个无文本、仅包含图像的链接。所以我这样设置:

<ul>
    <li><a href="./"></a></li>
</ul>

然后我意识到我真的不知道如何把图像放在那里。我想到了两个想法，但都各有问题:

• 将 img 标签放入 anchor 内。这不是很好的内容/设计分离，而且，如果我想在用户将鼠标悬停在图像上时改变图像(我这样做)，它会变得更加复杂。

• 使用 CSS 背景图像，但现在我必须为 anchor 指定与图像尺寸相等的宽度和高度，这迫使我在每次更改图像时都修改代码。

只有图像的导航栏很常见，那么有没有标准的方法来做到这一点？

Answer 1

我是这样使用它的:

CSS

ul{
    display:inline-block;
    width:350px;
    height:150px;
}
ul li{
    display:block;
}
ul li a, ul li{
    display:inline-block;
    width:100%;
    height:100%;
}
ul li.fb a{
    background:url(http://placehold.it/350x150) no-repeat left center;
}
ul li.tw a{
    background:url(http://placehold.it/350x150) no-repeat left center;
}

<ul>
    <li class="fb"><a href="http://facebook.com"></a></li>
    <li class="tw"><a href="http://twitter.com"></a></li>   
</ul>

你可以把所有这些图像放在 Sprite 等...

http://jsfiddle.net/sthAngels/842d4493/