Question

这一切都始于这两个代码

            #Header .Logo   
                  {                
            background: url('http://s24.postimg.org/69nibdvz9/Header_P     .png') no-repeat 0px 0px;
            height: 186px;
            width: 100%;
            position:relative;
            top: 0px;
            margin: 0px 0px -5px;
            clear: both;

和

             <div class="Logo"><center><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></center>
            </div>

基本上我有一个标题和我网站的标识。由于我使用徽标而不是标题，我希望图像有链接。所以我补充道：

             <div class="Logo"><center> <a href="http://oldtimesdaily.tumblr.com"><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></a></center>
            </div>

现在问题是链接创建的下划线很难看。我该如何删除它？我尝试添加“style =”text-decoration：none;“同时在.Logo和本身中添加，但它没有任何区别。有什么帮助吗？

Answer 1

试试这个：

a.Logo:link, a.Logo:visited {
    text-decoration: none
}

Answer 2

锚点在图像周围放置边框。

将border属性添加到图像样式

<img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px; border: none;" width="640" height="160" alt="{SourceTitle}" />

Here is the fiddle

Answer 3

如果您使用css设置链接样式，则该行应该消失

a:link {color:#;}      /* unvisited link */
a:visited {color:#;}  /* visited link */
a:hover {color:#;}  /* mouse over link */
a:active {color:#;}  /* selected link */

http://www.w3schools.com/css/css_link.asp

Answer 4

你应该添加这行css，这样链接中的任何图像都不会显示边框或下划线。

.Logo a,.Logo a img{
border:none;
text-decoration:none;
}

另外作为附注，除非您有多个徽标，否则您应该使用ID而不是CLASS作为最佳做法。当有可能有多个元素需要相同的样式时，你只能在css中使用类。

因此制作代码：

#Logo a, #Logo a img{
border:none;
text-decoration:none;
}

从超链接图像中删除下划线

4 个答案: