0

我正在学习，但我有一个问题。我有一个用css中的背景图像完成的页脚，做成一个链接。使用的文本缩进：-9999px；摆脱页脚图像顶部的 H1 。有人告诉我写在那里的 h1 在语义上是正确的，所以搜索引擎仍然可以看到它。然后用文本缩进隐藏它。我想在该页脚顶部放置四个社交媒体图标，这些图标可作为链接点击。我一直卡住。

<footer id="footer">
   <section id="socialmedia">

       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/facebook.png" width="56" height="54" alt="Facebook icon" title="Go to Facebook."  />
       </a>

       <a href="http://www.facebook.com/brilliantben">
                <img src="../images/pinterest.png" width="54" height="54" alt="Pinterest icon" title="Go to Pinterest"  />
       </a>



       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/twitter.png" width="54" height="54" alt="Twitter icon" title="Go to Twitter."  />
       </a>

       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/behance.png" width="55" height="54" alt="Behance icon" title="Go to Behance."  />
       </a>

   </section>

        <h1><a href="#">Goodbye, feel free to follow</a></h1>
</footer>

这是我的 CSS。

#footer {
    background-image: url(../images/footer.png);
    height:214px;
    width: 960px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;

}

#footer a {
    text-indent: -9999px;
    height:214px;
    width:100%;
    display:block;


}

这是我正在尝试制作的页脚。

谢谢

4

3 回答 3

0

Matewka 是对的，只需删除文本缩进即可。你只需要删除你不想在网站上显示的文本，但你希望它在那里让 seo 机器人看到。

于 2013-10-14T22:05:20.903 回答
0

正是text-indent它使图像不可见。去掉它。

#footer a {
    height:214px;
    width:100%;
    display:block;
}
于 2013-10-14T21:51:32.173 回答
0

您需要在 css 中创建图标链接 - 每个图标都需要一个

.facebook a:link { 宽度：214px; height: 在此处添加高度 margin-right: 15px; 显示：块；背景：透明网址（'../images/facebook.png'）中心底部不重复；背景尺寸：25px 25px；

}

将此 div 放在您想要的页脚中。

为其他图标重复设置

于 2013-10-14T22:02:53.200 回答