نمادها

شما اینجا هستید

آموزش تصویری ساخت گالری تصاویر با htmlوcss

موضوع بحث امروز ما آموزش تصویری ساخت گالری تصاویر با htmlوcss است

آموزش تصویری ساخت گالری تصاویر با htmlوcss دست شمارا برای شخصی سازی ها باز می گذارد

سلام برنامه آموزش تصویری و فارسی ساخت گالری تصاویر را برای شما آماده کرده است.

ویژگی برجسته این گالری این است که هیچ کد جاوا اسکریپتی در آن وجود ندارد

همچنین چیدمان قرار گیی عکس ها بر میگردد به سلیقه شما

شما تنها با کد های html و css به سادگی یک گالری تصاویر رسپانسیو می سازید.

که با اضافه کردن تصاویر به این گالری هیچ مشکلی برای رسپانسیوی آن به وجود نمی آید.

برای این کار کافیست  کد زیر را در قسمت body وارد کنید:

<div class="gallery">
  <a target="_blank" href="آدرس تصویر ۱ خود را وارد کنید">
    <img src="آدرس تصویر ۱ خود را وارد کنید" alt="Trolltunga Norway" width="300" height="200">
  </a>
  <div class="desc">توضیحات تصویر۱</div>
</div>

<div class="gallery">
  <a target="_blank" href="آدرس تصویر ۲ خود را وارد کنید">
    <img src="آدرس تصویر ۲ خود را وارد کنید" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">توضیحات تصویر۲</div>
</div>

<div class="gallery">
  <a target="_blank" href="آدرس تصویر ۳ خود را وارد کنید">
    <img src="آدرس تصویر ۳ خود را وارد کنید" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">توضیحات تصویر۳</div>
</div>

<div class="gallery">
  <a target="_blank" href="آدرس تصویر ۴ خود را وارد کنید">
    <img src="آدرس تصویر ۴ خود را وارد کنید" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">توضیحات تصویر۴</div>
</div>

در کد های بالا جای آدرس تصویر ۱ لینک عکس اول خود را قرار دهید و در توضیحات تصویر ۱ توضیحی برای تصویر بنویسید

و به ترتیب این کار را برای تصاویر ۲،۳،۴ نیز انجام دهید و تصاویر خود را وارد کنید.

برای درستی نمایش و استایل بندی کد زیر را به css قالب اضافه کنید:

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

کار طراحی گالری تصاویر در اینجا تمام است.

برای مشاهده جزئیات بیشتر آموزش می توانید ویدیو این آموزش را از باکس دانلود موجود در زیر همین پست همراه با سورس کد آن دریافت نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

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


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

آموزش تصویری ساخت گالری تصاویر با htmlوcss و سورس کد ها : نوع فایل:rar/video/code حجم فایل:20.9 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

3 دیدگاه برای “آموزش تصویری ساخت گالری تصاویر با htmlوcss”

  1. amir گفت:

    The plugin Akismet Anti- Spam need

  2. amir گفت:

    Our social network links are available at the end of the site
    thank you

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.