时间戳

首页 > 解决方案 > 图像未调整的 HTML 链接

html - 图像未调整的 HTML 链接

问题描述

我对 HTML/CSS 比较陌生，并且在我尝试创建的网站中发现了一个基本错误。

我正在使用外部 CSS 文件来设置我的网站的样式，并且我使用以下代码作为我的 HTML 链接的一般准则。

a:link, a:visited{
    background-color: #000000;
    color: white;
    padding: 14px 25px;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
}
a:active, a:hover{
    background-color: rgb(46, 46, 46);
    color: white;
}

在我将 style.css 文件链接到我的 HTML 文件（通过链接）后，我希望在屏幕的右上角有一个标准徽标，单击该徽标会将用户带到主屏幕。但是，我不想设置特定的像素大小，而是希望它覆盖特定百分比的屏幕，以便网站在手机和计算机上看起来很自然（而不是太大/太小）。我试图在下面这样做，虽然图像的比例正确，但当我将鼠标悬停在标签上时仍然遇到问题，图像周围似乎有一个边框亮起（甚至虽然我不希望它）。这是我用来添加徽标的代码：

<a href="index.html" style="float:right; padding:0px 0px;">
         <img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>

我很确定将百分比添加到宽度和高度是非法的，对吧？我也很好奇为什么这似乎适用于高度，但不适用于宽度，如果这样做有什么缺陷，请告诉我。这是此代码将导致我的徽标的输出：

当我不将鼠标悬停在它上面时，这是我的徽标

在上图中，我没有用鼠标悬停在图像上。徽标占用的空间比我想要的要多，并且有边框。

当我将鼠标悬停在它上面时，这是我的徽标

当我用鼠标悬停在上面的图像上时，上面的图像显示了我的徽标。注意它周围的边框会改变颜色，如果你点击这个区域，那么它会将它重定向到主页（这是我想要它做的，但我想将点击区域最小化到只是徽标的图片，而不是它周围的空间，我想摆脱徽标周围的边框）。

标签： htmlcss

解决方案

你可以试试这个，但请阅读以下内容：:)

a:link, a:visited{
    background-color: #000000;
    color: white;
    padding: 14px 25px;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
    border: none; /* <-- add this */
}

a:active, a:hover{
    background-color: rgb(46, 46, 46);
    color: white;
}

从我所看到的：我怀疑边框（和box-shadow？）来自父节点。您可以使用浏览器的检查器并单击边框来识别我们想要的 html 标签并给他下药：

{
    border: none;
    box-shadow: none;
}

我很确定将百分比添加到宽度和高度是非法的，对吧？

SWAT 不会出现在您的位置，尽管我们倾向于直接在 HTML 文件中避免这种情况。

此外，最好不要将样式放在 HTML 文件本身中，因为它可能会覆盖写在 css 文件上的一些规则。如果您不了解 CSS的特殊性，请阅读此处。

虽然在 CSS 文件上没问题。我自己通常将max-width: 100%放到图像中，并根据需要更改其父 div 的宽度和高度。

我不想设置特定的像素大小，而是希望它覆盖特定百分比的屏幕

太棒了！你知道大众和媒体查询吗？

推荐阅读