CSS问题

Question

我一直在研究如何使用CSS sprites作为图像链接，但我无法弄清楚这一点。我有一个PNG（这里：），里面有两个图像（为简单起见）。我希望每个图像都可以作为一个图标，可以链接到外部网站（Twitter和Facebook）。我像这样设置我的CSS：

CSS

#authorpage-links  ul {
    list-style-type:none;
}

#authorpage-links ul li {
    background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}

#authorpage-links ul li.twitter {
    background: url("/links-authorpage1.png") no-repeat 0 0; 
    width: 20px; 
    height: 14px; 
}

#authorpage-links ul li.facebook {
    background: url("/links-authorpage1.png") no-repeat -21px 0; 
    width: 14px; 
    height: 14px; 
}

...和我的HTML一样：

HTML

<ul id="authorpage-links">
<li id="authorpage-links" class="twitter">
<a target="_blank" href="http://twitter.com/"></a>
</li>
<li id="authorpage-links" class="facebook">
<a target="_blank" href="http://facebook.com/"></a>
</li>
</ul>

现在，2个问题：

1）使用列表以最佳方式显示这些图像还是应该使用div？

2）这是我的CSS ID和类的问题吗？

非常感谢任何帮助。

Answer 1

根据您的CSS修订版（我稍后会遇到的问题）到以下内容：

#authorpage-list {
    list-style-type: none;
}
#authorpage-list li {
    float: left;
}
#authorpage-list li a {
    background-color: transparent; /* I broke the background down into individual parts */
    background-image:    url(http://i.stack.imgur.com/ta3Va.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    display: block; /* in order that the a elements could be assigned a width/height */
    border: 1px solid #f90; /* for diagnostic purposes while working on this, adjust to taste */
}

#authorpage-list #authorpage-facebook-link a {
    /* a specific selector, in order to be more specific than the previous
       selector which styled the defaults for the a elements in this position */
    background-position: -21px 0;
}

将您的HTML修改为以下内容：

<ul id="authorpage-list">
    <li id="authorpage-twitter-link" class="twitter">
    <a target="_blank" href="http://twitter.com/"></a>
    </li>
    <li id="authorpage-facebook-link" class="facebook">
    <a target="_blank" href="http://facebook.com/"></a>
    </li>
</ul>

我想出了这个：JS Fiddle demo。

<小时/>

CSS问题

这是HTML中最大的禁忌（或者我曾经能够看到，甚至比blink标签更糟糕）：你有 <您的HTML中的相同 id的多个 示例。 id 必须在文档中是唯一的。如果没有，则表示HTML无效。这导致CSS问题，使用JavaScript和......它只是坏。

如果您有多个需要共享属性/样式的元素，或者其他什么，请使用class，而不是id。
您的选择器。 #authorpage-links ul应与ul的祖先元素中的id="#authorpage-links"元素匹配。 ul是元素id。我会忽略它的子元素也有id，因为我认为我已经覆盖了那部分。所有其他的CSS都是从那个基础开始的，这不准确，所以没有用。

Answer 2

您的<li>元素的大小可能是14x14，但<a>标记中没有任何内容，因此这些元素会缩小到0x0区域，从而有效地使列表元素可点击区域不可见。您可能应该在锚标记中放置一个空格，因此有一些空格可以将它们打开，例如。

<a target="_blank" href="http://facebook.com/">&nbsp;</a>
                                               ^^^^^^

Answer 3

您的a链接需要有一个大小。我这样做是为了让a有一个可点击的区域。由于您的lis不需要尺寸，因此我将a链接的大小设为。

将以下内容替换为：

ul#authorpage-links li a {
    display: inline-block;
    background: url("/links-authorpage1.png") no-repeat scroll 0 0 transparent;
}

ul#authorpage-links li.twitter a {
    background-position: 0 0; 
    width: 20px; 
    height: 14px; 
}

ul#authorpage-links li.facebook a {
    background-position -21px 0; 
    width: 14px; 
    height: 14px; 
}

同时从lis删除id属性。

“......很棒的答案......” - Sparky672

了解CSS精灵和链接

3 个答案:

CSS问题