0

我正在尝试在我的博客的侧边栏中添加一些社交图标。在我的侧边栏中，我将一些主题组织在一个列表中。在此列表的末尾，我希望有一个显示我的社交图标的列表项。我设法通过使用标签来实现这一点，并得到了这样的东西：

<!-- Social icons -->
<li>
<img src="/images/Twitter.png"><a href="http://twitter.com"></a></img>
<img src="/images/Github.png"><a href="http://github.com"></a></img>
<img src="/images/Quora.png"><a href="http://quora"></a></img>
<img src="/images/LinkedIn.png"><a href="http://linkedin.com"></a></img>
<img src="/images/Google.png"><a href="http://google.com"></a></img>
<img src="/images/Flickr.png"><a href="http://flickr.com"></a></img>
<img src="/images/Vimeo.png"><a href="http://vimeo.com"></a></img>
<img src="/images/YouTube.png"><a href="http://youtube.com"></a></img>
</li>

但是，我不喜欢这种方法，因为

  • 链接由于某种原因不起作用
  • 我无法调整图像的大小（它们像这样大）
  • 我将无法获得悬停效果

因为我刚开始使用 CSS，所以我不知道如何解决这个问题。我尝试使用一些 div 容器和 ids 和类，但我无法让它工作。所以这是给你们所有 CSS 专家的：

如何使用 CSS 调整图像大小、内联显示、带有链接和悬停效果并摆脱这些标签？

4

4 回答 4

2

链接不起作用，因为标签嵌套不正确：<a href="..."><img src="..." /></a>。

要使用 CSS 显示图像，您将删除img标记并向元素添加background-imageCSS 样式<a>（以及一些填充等，以便文本不会重叠）。这是一个分步示例。

还有一些其他阅读材料如何增强这种情况：CSS sprites（将所有这些图标合并到一个下载中以加快速度）和CSS Data URI（将图标直接嵌入到 .css 文件中以减少下载次数）。

于 2013-03-20T17:46:34.877 回答
0

你可以使用css背景。

.class{
background-image:url('image.png');
}
于 2013-03-20T17:48:17.720 回答
0

上面的答案是您问题的一个很好的例子

对于这样的链接使用——

<a href="http://twitter.com"> <img src="/images/Twitter.png" /> </a>
<a href="http://github.com"> <img src="/images/Github.png" /> </a>
<a href="http://quora.com"> <img src="/images/Quora.png" /> </a>

对于悬停效果使用

li a:hover{color:#ff0000} as css

这将在悬停时显示红色。

于 2013-03-20T19:42:32.200 回答
0

使用您的第一个示例，格式如下：

<a href= "http://twitter.com">
<img src= "/images/Twitter.png" />
</a>

对于悬停，如果您将链接分配给一个类，您也应该能够设置悬停质量。

http://kyleschaeffer.com/user-experience/pure-css-image-hover/

于 2013-03-20T17:56:34.420 回答