HTML+css写一个卡片例子

以下是一个简单的卡片示例，使用HTML和CSS创建：

HTML代码：

<div class="card">
  <img src="https://picsum.photos/id/237/200/300" alt="Card Image">
  <div class="card-content">
    <h2>Card Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla velit vel malesuada hendrerit. Nunc nec sapien euismod, ullamcorper diam et, suscipit ipsum.</p>
    <button>Learn More</button>
  </div>
</div>

CSS代码：

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}

.card img {
  max-width: 100%;
}

.card-content {
  padding: 2px 16px;
}

.card h2 {
  font-size: 28px;
  color: #333;
}

.card p {
  font-size: 18px;
  color: #666;
}

.card button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  margin-top: 10px;
  cursor: pointer;
}

.card button:hover {
  background-color: #3e8e41;
}

在浏览器中查看代码，您将看到一个简单的带有图像、标题、文本和按钮的卡片。您可以使用这些代码作为起点，并根据自己的需求进行修改和定制。