返回

用 HTML+CSS+JS 打造引人注目的个人相册封面卡片

前端

引言

在数字时代，个人相册已成为珍藏回忆和展示摄影技巧的宝贵工具。为了让您的相册在众多竞争者中脱颖而出，创建引人注目的封面卡片至关重要。本文将逐步指导您使用 HTML、CSS 和 JS 构建一个美观且交互式的相册封面卡片。

步骤 1：HTML 结构

<div class="card-container">
  <div class="card-image">
    <img src="image.jpg" alt="相册封面" />
  </div>
  <div class="card-info">
    <h1>个人相册</h1>
    <p>捕捉生活的精彩瞬间</p>
    <button>查看相册</button>
  </div>
</div>

步骤 2：CSS 样式

.card-container {
  display: flex;
  width: 300px;
  height: 400px;
  background-color: #fff;
  border-radius: 10px;
}

.card-image {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-info {
  width: 50%;
  height: 100%;
  padding: 20px;
}

.card-info h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-info p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.card-info button {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

步骤 3：JS 交互

const button = document.querySelector('button');

button.addEventListener('click', () => {
  window.location.href = 'album.html';
});

步骤 4：实现交互

当用户单击封面卡片上的按钮时，它将自动跳转到相册页面（album.html）。

结语

恭喜您！现在，您已经掌握了使用 HTML、CSS 和 JS 构建个人相册封面卡片的技能。通过自定义图像、文本和样式，您可以创建反映您独特风格和摄影愿景的卡片。随着技术的不断发展，探索新的方法和功能来增强您的相册体验也至关重要。