نمایش یک عکس به صورت کارت (Card)، با کلاس های مربوط به ساخت کارت (کلاس های w3-card و w3-card-2 و w3-card-4)، در W3.CSS

چنانچه قصد داشته باشیم که یک عکس به صورت کارت (Card) نمایش داده شود، تنها کافی است که یکی از کلاسهای (Class) مربوط به ساخت کارت (Card) در چارچوب W3.CSS ، یعنی یکی از کلاس های w3-card و w3-card-2 و w3-card-4 را برای تگ div حاوی تگ img مربوط به آن عکس ذکر نماییم (تگ img برای نمایش عکس به کار می رود - کلید شماره 507 ).

ویژگی کارت (card) این است که با داشتن حاشیه سایه دار (bordered shadow)، شبیه به یک کارت (card) کاغذی خواهد بود و نسبت به سایر بخش های صفحه، کمی برجسته به نظر می آید.

به عنوان مثال، کد زیر را می نویسیم :

به مثال زیر توجه کنید :

مثال

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
مثال

یک مثال از وب سایت w3schools.com :

بخش مهم کدها :

کد کامل صفحه HTML :

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید
منابع و لینک های مفید
نویسنده علیرضا گلمکانی
شماره کلید 26270
گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 0 0 0

ارسال نظر جدید (بدون نیاز به عضو بودن در وب سایت)