卡片是现代网页设计中最通用的组件之一。它们用于以简洁且具有视觉吸引力的方式呈现信息，从在线商店中的产品到博客上的文章。在本指南中，我们将探索不同的实现和最佳实践。
卡片剖析
一张典型的卡片由几个元素组成：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="card">
<!-- imagen -->
@@##@@
<!-- contenido -->
<div class="card-content">
<h2 class="card-title">título de la card</h2>
<p class="card-description">descripción o contenido principal</p>
<!-- pie de card -->
<div class="card-footer">
<button class="card-button">acción principal</button>
<span class="card-meta">info adicional</span>
</div>
</div>
</div>
实施
1.带有css的基本卡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.card {
width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.card:hover {
transform: translatey(-4px);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 16px;
}
.card-title {
margin: 0 0 8px;
font-size: 1.25rem;
}
.card-description {
color: #666;
line-height: 1.5;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid #eee;
}
2. 带有 tailwind css 的卡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="max-w-sm rounded overflow-hidden shadow-lg hover:-translate-y-1 transition-transform">
@@##@@
<div class="px-6 py-4">
<h2 class="font-bold text-xl mb-2">título de la card</h2>
<p class="text-gray-700 text-base">
descripción o contenido principal
</p>
</div>
<div class="px-6 py-4 border-t border-gray-200">
<button class="bg-blue-500 text-white px-4 py-2 rounded">
acción
</button>
<span class="text-gray-500 text-sm">meta info</span>
</div>
</div>
3. 使用 typescript 响应组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
interface cardprops {
image: string;
title: string;
description: string;
action?: () => void;
meta?: string;
}
const card: react.fc<cardprops> = ({
image,
title,
description,
action,
meta
}) => {
return (
<div classname="card">
@@##@@
<div classname="card-content">
<h2 classname="card-title">{title}</h2>
<p classname="card-description">{description}</p>
<div classname="card-footer">
{action && (
<button
onclick={action}
classname="card-button"
>
ver más
</button>
)}
{meta && <span classname="card-meta">{meta}</span>}
</div>
</div>
</div>
);
};
4.vue 3组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div class="card">
@@##@@
<div class="card-content">
<h2 class="card-title">{{ title }}</h2>
<p class="card-description">{{ description }}</p>
<div class="card-footer">
<button
v-if="action"
@click="action"
class="card-button"
>
ver más
</button>
<span v-if="meta" class="card-meta">{{ meta }}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
defineprops<{
image: string;
title: string;
description: string;
action?: () => void;
meta?: string;
}>();
</script>
设计模式
1. 响应式卡片网格
1
2
3
4
5
6
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
padding: 24px;
}
2. 长宽比卡片
1
2
3
4
5
6
7
8
9
10
11
12
13
.card-image-container {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.card-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
3. 骨架加载
1
2
3
4
5
6
7
8
9
.card-skeleton {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
无障碍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div
class="card"
role="article"
tabindex="0"
>
@@##@@
<div class="card-content">
<h2 id="card-title">título</h2>
<p id="card-desc">descripción</p>
<button
class="card-button"
aria-labelledby="card-title"
>
ver más
</button>
</div>
</div>
最佳实践
图像优化1
2
3
4
5
6
7
8
9
10
import image from next/image;
<image
src={imageurl}
alt={title}
width={300}
height={200}
placeholder="blur"
blurdataurl={thumbnailurl}
/>
1
2
3
4
5
const handleimageerror = (e: react.syntheticevent<htmlimageelement>) => {
e.currenttarget.src = /placeholder.jpg;
};
@@##@@
1
2
3
4
5
6
7
.card-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* hover effects */
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translatey(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
/* click effect */
.card:active {
transform: translatey(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
性能考虑因素
延迟加载1
@@##@@
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Cargar contenido
}
});
},
{ threshold: 0.1 }
);
observer.observe(cardRef.current);
return () => observer.disconnect();
}, []);
结论
卡片是现代网页设计的基本组成部分。一个好的实施应该考虑：
响应式设计 辅助功能 性能 用户体验 代码可维护性其他资源
材质设计卡片 tailwind ui 组件 mdn web 组件
以上就是现代Web开发中卡片的设计与实现的详细内容，更多请关注php中文网其它相关文章！