موضوع بحث امروز ما آموزش تصویری ساخت گالری تصاویر با 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; }
کار طراحی گالری تصاویر در اینجا تمام است.
برای مشاهده جزئیات بیشتر آموزش می توانید ویدیو این آموزش را از باکس دانلود موجود در زیر همین پست همراه با سورس کد آن دریافت نمایید.
The plugin Akismet Anti- Spam need
Our social network links are available at the end of the site
thank you
thank you