یک کارت رابط کاربری با HTML و CSS بسازید که شامل تصویر، عنوان، متن کوتاه و دکمه باشد و داخل یک کانتینر ریسپانسیو قرار گیرد بهگونهای که در صفحههای بزرگ کارتها بهصورت ردیفی و در موبایل ستونوار نمایش داده شوند و هنگام هاور سایه و بزرگنمایی ملایم داشته باشند.
52.0 بازدید آخرین ویرایش در 198 روز قبل ساعت 05:52 1.0
برای حل این مسئله از HTML ساده برای ساختار کارت (img, h3, p, button) و از CSS برای استایلدهی استفاده کنید؛ کانتینر با Flexbox یا Grid چینش کارتها را مدیریت کند و با media query در عرضهای کوچک جهت را به ستون تغییر دهید. کارتها با border-radius، box-shadow و overflow:hidden ساخته شوند، تصویر با width:100% و object-fit:cover تنظیم شود، و برای افکت هاور از transition و transform (مثلاً translateY و scale) و افزایش ملایم box-shadow بهره ببرید؛ همچنین از واحدهای نسبی (rem) و متغیرهای CSS برای رنگ و فاصله استفاده کنید و برای دسترسیپذیری، حالت :focus برای دکمهها را فراموش نکنید.
توسط پژوهشگر در 198 روز قبل ساعت 05:52 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای دسترسی و کارایی بهتر بهعلاوهٔ استایل دهی، حتماً تصاویر را با صفت alt و loading="lazy" بارگذاری کنید و از object-fit:cover بههمراه اندازهٔ ثابت (مثلاً aspect-ratio) برای جلوگیری از جابهجایی طرح استفاده کنید. از CSS variables برای رنگها و فاصلهها استفاده کرده و واحدهای نسبی (rem) را بهکار ببرید تا قیود ریسپانسیو سادهتر شوند؛ کانتینر را با gap در Flexbox یا Grid چیدمان دهید. برای حالتهای تعاملی علاوه بر :hover، حالت :focus-visible برای دکمهها را پیادهسازی کنید و با @media (prefers-reduced-motion: reduce) افکتهای تبدیل را ملایم یا غیرفعال کنید تا برای کاربران حساس مناسبتر باشد.
گزارش