仅显示图像边框的底部

Question

大家好，我现在正在上 CSS/HTML 课程，我必须为我网站上的图像分配边框。 1.我给图像一个类：

 <a href="https://de.wikipedia.org/wiki/Elefanten" 
    target="_blank" 
    class="images>
    <img src="elefant.jpg" alt="Elefant">

1. 在我的 CSS 文件中，我使用以下代码来分配边框：

   .images {

           border-left: 10px solid red;
           border-top: 10px solid red;
           border-bottom: 10px solid red;
           border-right: 10px solid red;
       }
   

应该是非常简单的代码，但在 Chrome 中它似乎并不能正常工作。截图如下：

https://snipboard.io/VAipY8.jpg

这可能是一个非常初学者的事情，但我希望有人可以帮助我:)

Answer 1

如果你想让图片成为一个可点击的链接，你应该把它放在<a>标签之间

<a href = " "><img src = " "></a>

并且要为图像添加边框，您应该为<img> 标签而不是<a> 标签赋予类。 目前您正在为<a> 标记内的链接应用边框。

Answer 2

您在 img 标记中缺少结束 / 标记。以及类属性中的“结束”。以及锚标记的结束标记。像这样编写代码：

<a href="https://de.wikipedia.org/wiki/Elefanten" 
    target="_blank" 
    class="images" >    
    <img src="elefant.jpg" alt="Elefant" class="elephantImg" />
</a>

改变css如下：

img {

    border-left: 10px solid red;
    border-top: 10px solid red;
    border-bottom: 10px solid red;
    border-right: 10px solid red;
}

如果您决定不在大象图像上使用 class 属性，则可以使用它，否则，如果您决定使用大象 Img 类属性，请使用此 css：

.elephantImg{

        border-left: 10px solid red;
        border-top: 10px solid red;
        border-bottom: 10px solid red;
        border-right: 10px solid red;
    }