返回

用 HTML 和 CSS 来展现你的猫猫队列

前端

有那么一个地方，人们可以尽情分享和欣赏猫猫照片。一个猫猫照片的图库，里面有各种可爱、有趣、逗趣的猫猫照片。

首先，我们用 HTML 来构建图库的基本结构。我们可以创建一个简单的容器来容纳所有的猫猫照片，然后在容器内使用<img>标签来展示每一张照片。我们可以设置照片的大小、位置和边框，还可以为每一张照片添加一个标题。

<div id="cat-gallery">
  <img src="cat1.jpg" alt="猫猫1">
  <img src="cat2.jpg" alt="猫猫2">
  <img src="cat3.jpg" alt="猫猫3">
</div>

接下来，我们用 CSS 来美化图库。我们可以设置图库的背景颜色、文字颜色和字体。我们可以使用 CSS 的 flexbox 布局来排列照片，还可以使用 CSS 的动画效果来让照片更加生动。

#cat-gallery {
  background-color: #f5f5f5;
  padding: 20px;
}

#cat-gallery img {
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid #ccc;
}

#cat-gallery img:hover {
  box-shadow: 0 0 5px #ccc;
}

最后，我们可以使用 JavaScript 来添加一些交互功能。我们可以让照片在鼠标悬停时放大，或者让照片点击后跳转到一个新的页面。

var catGallery = document.getElementById('cat-gallery');
var catImages = catGallery.getElementsByTagName('img');

for (var i = 0; i < catImages.length; i++) {
  catImages[i].addEventListener('mouseover', function() {
    this.style.transform = 'scale(1.1)';
  });

  catImages[i].addEventListener('mouseout', function() {
    this.style.transform = 'scale(1)';
  });

  catImages[i].addEventListener('click', function() {
    window.open(this.src);
  });
}

这样，我们就完成了一个用 HTML、CSS 和 JavaScript 制作的猫猫图片库。我们可以用这个图库来展示我们自己的猫猫照片，也可以用它来分享我们最喜欢的猫猫照片。