0

我一直在研究如何使用 CSS 精灵作为图像链接，但我无法弄清楚。我有一个 PNG（此处：）http://i.stack.imgur.com/ta3Va.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 和类的问题吗？

任何帮助是极大的赞赏。

4

3 回答 3

3

基于您对 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 演示。

​<小时 />

CSS 问题

  1. 这是就 HTML 而言最大的禁忌（或者就我所见，它甚至比blink标签更糟糕）：您的 HTML 中有多个相同 的示例。id一个在文档中id 必须是唯一的。如果不是，则您的 HTML 无效。这会导致 CSS 和 JavaScript 出现问题，而且......这很糟糕。

    如果您有多个元素需要共享一个属性/样式或其他任何内容，请使用 a class，而不是id.

  2. 你的选择器。#authorpage-links ul应该匹配ul的祖先元素中的元素id="#authorpage-links"。是带有that的ul元素。我会忽略它的子元素也有 that ，因为我认为我已经涵盖了那部分。你所有的其他 CSS 都是从那个基础开始的，这是不准确的，所以没有工作。idid

于 2012-04-22T19:50:49.080 回答
1

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

<a target="_blank" href="http://facebook.com/">&nbsp;</a>
                                               ^^^^^^
于 2012-04-22T19:39:04.303 回答
-1

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

将您的 li css 替换为：

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.

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

于 2012-04-22T19:39:39.447 回答