用css制作卡片
基础卡片结构
使用HTML创建卡片容器，CSS定义样式。HTML部分包含标题、图片和描述内容。
<div class="card">
<img src="image.jpg" alt="示例图片">
<div class="card-content">
<h3>卡片标题</h3>
<p>这里是卡片的描述文本。</p>
</div>
</div>卡片样式设计
通过CSS设置宽度、阴影、圆角等属性增强视觉效果。
.card {
width: 300px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: Arial, sans-serif;
background: white;
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.card-content {
padding: 16px;
}
.card h3 {
margin: 0 0 8px;
font-size: 1.2em;
}
.card p {
margin: 0;
color: #555;
}悬停交互效果
添加悬停动画提升用户体验，例如阴影加深或轻微上浮。
.card:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-4px);
transition: all 0.3s ease;
}响应式调整
通过媒体查询适应不同屏幕尺寸，确保移动端友好。
@media (max-width: 600px) {
.card {
width: 100%;
margin-bottom: 16px;
}
}进阶样式选项
- 边框样式：使用
border: 1px solid #eee替代阴影。 - 渐变背景：为卡片内容区域添加
background: linear-gradient(...)。 - 自定义图标：在标题旁嵌入Font Awesome等图标库的图标。
.card-content {
background: linear-gradient(to bottom, #f9f9f9, #fff);
}
