现代Web开发中卡片的设计与实现

<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> 

.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; } 

<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> 

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>   ); }; 

<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> 

.card-grid {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));   gap: 24px;   padding: 24px; } 

.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; } 

.card-skeleton {   animation: pulse 1.5s infinite; }  @keyframes pulse {   0% { opacity: 0.6; }   50% { opacity: 1; }   100% { opacity: 0.6; } } 

<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> 

import image from 'next/image';  <image   src={imageurl}   alt={title}   width={300}   height={200}   placeholder="blur"   blurdataurl={thumbnailurl} /> 

const handleimageerror = (e: react.syntheticevent<htmlimageelement>) => {   e.currenttarget.src = '/placeholder.jpg'; };  @@##@@ 

.card-title {   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical; } 

/* 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); } 

@@##@@ 

useEffect(() => {   const observer = new IntersectionObserver(     (entries) => {       entries.forEach(entry => {         if (entry.isIntersecting) {           // Cargar contenido         }       });     },     { threshold: 0.1 }   );    observer.observe(cardRef.current);   return () => observer.disconnect(); }, []);