右侧带有图像的引导卡 - Html

在现代响应式网页设计中, 使用卡片布局风格非常流行. 带有图像的引导卡作为其中的一个热门布局方式, 在很多网站和应用程序中被广泛使用.

什么是带有图像的引导卡?

带有图像的引导卡是一种网页布局方式, 它通常包含一个标题, 一张图片和一段描述性的文本, 以及一个可点击的按钮, 卡片会突出显示以引导用户执行特定操作.

如何实现带有图像的引导卡?

在 HTML 中实现一个带有图像的引导卡非常简单, 只需使用一些基本的 HTML 元素和 CSS 样式即可.

HTML 结构

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-body">
    <h3 class="card-title">Card Title</h3>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Read More</a>
  </div>
</div>

CSS 样式

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 300px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card img {
  width: 100%;
  height: auto;
}

.card-body {
  padding: 20px;
}

.card-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.card-text {
  font-size: 16px;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #3e8e41;
}

总结

带有图像的引导卡是一种流行的网页布局方式, 它通过突出显示图像和标题, 吸引用户的注意力, 并引导用户执行特定的操作. 在 HTML 和 CSS 中实现一个带有图像的引导卡非常简单, 只需一些基本的 HTML 元素和 CSS 样式即可.