html - 为 img 按钮制作一个 div 类

Question

抱歉，如果我的标题有点误导但不知道如何措辞/​​措辞。

目前，我有转到各种社交网络的 href'd 图片。例如，通过单击 facebook 图标，它会转到我的 facebook。它的布局如下:

<div class="row">
            <center>
                <div class="span2">
                    <a href="http://www.facebook.com/XXXXXXX" target="_blank"><img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img></a> 
                </div>

如果有意义的话，有没有办法让它成为一个“类”？所以我可以通过做类似的事情来获得相同的效果

<div class="span2">
<a href=http://www.facebook.com/XXXXXX" target="_blank" class="facebookbutton"></a>
</div>

然后在 CSS 中有这个:

.facebookbutton {
    width:64px;
    height64px;
    background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}

对不起，如果这是一个荒谬的帖子，我还在学习哈哈!

谢谢:)

Answer 1

如果您修正拼写错误(href= 后缺少的引号和高度后缺少的冒号)，并添加 display: block，您编写的代码就可以正常工作。

http://jsfiddle.net/oudL3ovz/1/

.facebookbutton {
    width:64px;
    height:64px;
    background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
    display:block;
}

HTML

<div class="span2">
<a href="http://www.facebook.com/XXXXXX" target="_blank" class="facebookbutton"></a>
</div>

您可能需要使用 display: inline-block;。