我正在向我的页脚添加2个社交媒体图片。 它们在我的图像地图中,包括在右边等但似乎无法弄清楚它们为什么没有出现?
尝试了这么多,但真的无法做到正确..它与我的网页固定到我的网站有什么关系吗?我真的不知道..
代码:
<div id="footer">
<div id="social">
<p>test</p>
<div class="facebook"><a href="" title="Facebook Page"></a></div>
<div class="twitter"><a href="" title="Twitter"></a></div>
</div>
<p>Copyright © 2013 . All rights reserved.</p>
</div>
CSS:
#social {
text-align: center;
}
.facebook a {
height: 33px;
width: 33px;
background-image: url('images/facebook.png');
background-repeat: no-repeat;
}
.facebook a:hover {
background-image: url('images/facebookhover.png');
background-repeat: no-repeat;
}
.twitter a {
height: 33px;
width: 33px;
background-image: url('images/twitter.png');
background-repeat: no-repeat;
}
.twitter a:hover {
background-image: url('images/twitterhover.png');
background-repeat: no-repeat;
}
/* Footer */
#footer {
padding: 5px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
background: #333;
color: #FFF;
}
#footer p {
text-align: center;
margin: 0;
}
#footer a {
color: #fff;
}
以下是jsfiddle的示例: http://jsfiddle.net/mwx5q/
答案 0 :(得分:5)
在display block
和.facebook a
.twitter a
样式
请检查,我已更新您的jsFiddle文件,您可以根据您的设计更改css。
答案 1 :(得分:0)
您的url
路径可能存在问题。
也许尝试../images/twitter.png
和../images/twitterhover.png
这将备份一个文件夹。如果你的CSS在它自己的文件夹中很有用,你必须备份到root,然后进入images
。
希望这有帮助!