فیلم آموزش ساخت گالری عکس با CSS و HTML

فیلم آموزش ساخت گالری عکس با CSS و HTML

همانطور که تا به حال در فیلم های آموزش طراحی سایت آنلاینر مشاهده کرده اید، با استفاده از مواردی که از html و css به شما آموختیم، روش ساخت منوی کشویی، منوی افقی و منوی عمودی را برای شما کاربران عزیز توضیح دادیم. در این آموزش CSS، یک گالری عکس ساده را ایجاده کرده و به سبک دهی آن می پردازیم.

گالری عکس در وب سایت می تواند کاربردهای زیادی داشته باشد، از جمله برای معرفی محصولات یا درج تصاویر از پرسنل شرکت و … می توان از یک آلبوم عکس ساده استفاده کرد. پس به شما پیشنهاد می کنیم، در این آموزش طراحی سایت با ما همراه باشید، چون علاوه بر ساخت گالری عکس، نکات مهمی در مورد وسط چین کردن عکس ها، ایجاد double border برای عکس ها و … بیان خواهیم کرد.

ما در فیلم آموزش ساخت pagination با CSS و HTML، برای این گالری ساده یک صفحه بندی ایجاد کرده ایم.

[hdplay id=89]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]
[video_download cat=’html’ url=’https://onliner.ir/css-videos/image-gallery-styling.mp4′]دانلود فیلم آموزش ساخت گالری عکس با CSS و HTML[/video_download]

[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/css-snippets/simple-image-gallery.zip’]دانلود دمو[/onliner_button]
[/free_vip]

دسترسی سریع :

دیدگاه خود را برای ما ارسال کنید

5 Comments
  1. Pingback: آموزش CSS | آموزش ساخت pagination (صفحه بندی) با CSS و HTML

    • Iman
    • ۱۳۹۳-۰۶-۲۰
    پاسخ

    سلام
    شما تو مبحث margin گفتید margin بالا و پایین حداکثرش در نظر گرفته میشه ولی تو این گالری شما margin بالا و پایین هر کدام ١٠ پیکسل دادید ولی جمعش ٢٠ پیکسل اعمال شد

      • گروه آموزش طراحی سایت
      • ۱۳۹۳-۰۶-۲۰
      پاسخ

      سلام
      اگر دقت بفرمایید، متوجه میشوید که در بخش درست کردن گالری، عناصر شناور (float) شده اند. پس قواعد حالت عادی برای آن ها صادق نیست و قضیه فرق می کند.

    • mahdibaba1234
    • ۱۳۹۵-۱۱-۱۷
    پاسخ

    سلام من وقتی به img
    ;width:100% میدم از قالبی که توی div تعریف کردم میزنه بیرون . یکسان نمیشه باید چی کار کنم

      • سمیه شمس
      • ۱۳۹۶-۰۶-۲۶
      پاسخ

      باید max-width رو ۱۰۰درصد بدید.