时间戳

首页 > 解决方案 > 有谁知道为什么我的缩略图没有显示？

html - 有谁知道为什么我的缩略图没有显示？

问题描述

我似乎无法弄清楚我做错了什么，我的缩略图没有显示。我知道这可能是非常基本的，但我只是一个初学者，我不断删除和更改代码中的内容，我仍然不明白为什么它不会显示。感谢您抽出宝贵时间，这是我的代码：

h1,
p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 2vw;
}

.container {
  max-width: 960px;
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 8px;
}

max-width: 960px;
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 8px;

}
.box img {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  background-color: cornflowerblue;
}
img {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 5px;
  width: 150px;
}
img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 139, 186, 0.815);
}
@media screen and (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 414px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
  }
}
<body>
  <h1>Gallery heading</h1>
  
  <div class="container">
    <div class="box"> <img src="placeholder-image.png" alt=""></div>
    <div class="box"> <img src="placeholder-image.png" alt=""></div>
    <div class="box"> <img src="placeholder-image.png" alt=""></div>
  </div>
  
  <p>.</p>
</body>
</main>

标签： htmlcss

解决方案

推荐阅读