با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در اغلب موارد خصوصا در وب سایت های فروشگاهی و در بخش تبلیغات وب سایت و یا در وب سایت های خبری، شاید شما بخواهید که یک گالری تصاویر را در قالب اصلی خود اضافه کنید، این گالری محصولات و خبرنامه وب سایت را بهتر در معرض دید کاربران قرار داده و زمینه ی دسترسی سریع به محتوای مهم را فراهم می کند، برای ایجاد این مورد باید با چگونگی تنظیم گالری تصاویر در CSS آشنایی داشته باشید، ما در ادامه ی این بخش یک نمونه از ساختار کلی ایجاد گالری Image در CSS را ارائه کرده ایم.
در این آموزش ما با استفاده از کدهای CSS به ایجاد یک نمونه ساده ی گالری Image در CSS پرداخته ایم.
CSS ایجاد یک نمونه ساده از گالری تصاویر در CSS به صورت زیر است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <html> <head> <style> 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; } </style> </head> <body> <div class="gallery"> <a target="_blank" href="fjords.jpg"> <img src="5terre.jpg" alt="Cinque Terre" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="forest.jpg"> <img src="forest.jpg" alt="Forest" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="lights.jpg"> <img src="lights.jpg" alt="Northern Lights" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> <div class="gallery"> <a target="_blank" href="mountains.jpg"> <img src="mountains.jpg" alt="Mountains" width="300" height="200"> </a> <div class="desc">Add a description of the image here</div> </div> </body> </html> |
نمونه ای دیگر از گالری تصاویر در CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!DOCTYPE html> <html> <head> <style> div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <h2>Responsive Image Gallery</h2> <h4>Resize the browser window to see the effect.</h4> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p> <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p> </div> </body> </html> |
طرح های گالری تصاویر در CSS به شما کمک می کند تا محصولات فروشگاهی خود را بهتر به کاربران معرفی کنید، همچنین این استفاده گالری تصاویر توجه کاربران به محتواهای مهم و خبرنامه های وب سایت شما جلب می کند.
علی
سلام. لطفا خطوط ۲۳ تا ۵۰ رو بیشتر توضیح بدید.
علی اصغری
سلام وقتتون بخیر ، این خطوط همون آیتم های گالری تصویر رو تشکیل میدن، که چهار تا div با کلاس gallery همون ۴ آیتم رو میسازن، داخلش تگ و داخل اون تگ های که همون تصاویر هستن و پاین تگ هم یک div با کلاس desc که همون کپشن یا متن پایین تصویر هستن.