我想创建一个带有 ul
元素的导航栏,其中导航栏上的每个元素都是一个无文本、仅包含图像的链接。所以我这样设置:
<ul>
<li><a href="./"></a></li>
</ul>
然后我意识到我真的不知道如何把图像放在那里。我想到了两个想法,但都各有问题:
将
img
标签放入 anchor 内。这不是很好的内容/设计分离,而且,如果我想在用户将鼠标悬停在图像上时改变图像(我这样做),它会变得更加复杂。使用 CSS 背景图像,但现在我必须为 anchor 指定与图像尺寸相等的宽度和高度,这迫使我在每次更改图像时都修改代码。
只有图像的导航栏很常见,那么有没有标准的方法来做到这一点?
最佳答案
我是这样使用它的:
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 等...
关于html - 使用 CSS 的纯图像导航栏的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32266511/