۳۰
مهر

جلسه ۳۱ : گالری تصاویر در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در اغلب موارد خصوصا در وب سایت های فروشگاهی و در بخش تبلیغات وب سایت و یا در وب سایت های خبری، شاید شما بخواهید که یک گالری تصاویر را در قالب اصلی خود اضافه کنید، این گالری محصولات و خبرنامه وب سایت را بهتر در معرض دید کاربران قرار داده و زمینه ی دسترسی سریع به محتوای مهم را فراهم می کند، برای ایجاد این مورد باید با چگونگی تنظیم گالری تصاویر در CSS آشنایی داشته باشید، ما در ادامه ی این بخش یک نمونه از ساختار کلی ایجاد گالری Image در CSS را ارائه کرده ایم.

گالری تصاویر در CSS

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

گالری تصاویر در CSS

ایجاد گالری Image در CSS

CSS ایجاد یک نمونه ساده از گالری تصاویر در CSS به صورت زیر است:

مثال : گالری تصویر

<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>

<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>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

خودتان امتحان کنید »

نمونه ای دیگر از گالری تصاویر در CSS:

مثال : گالری تصاویر-2

<!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>

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>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

<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 به شما کمک می کند تا محصولات فروشگاهی خود را بهتر به کاربران معرفی کنید، همچنین این استفاده گالری تصاویر توجه کاربران به محتواهای مهم و خبرنامه های وب سایت شما جلب می کند.

به اشتراک بگذارید

گالری تصاویر در CSS

دیدگاه کاربران

تعداد دیدگاه : 2

علی
فروردین ۱۸, ۱۳۹۸
سلام. لطفا خطوط ۲۳ تا ۵۰ رو بیشتر توضیح بدید.
پاسخ دادن
- علی اصغری
  فروردین ۱۹, ۱۳۹۸
  سلام وقتتون بخیر ، این خطوط همون آیتم های گالری تصویر رو تشکیل میدن، که چهار تا div با کلاس gallery همون ۴ آیتم رو میسازن، داخلش تگ و داخل اون تگ های که همون تصاویر هستن و پاین تگ هم یک div با کلاس desc که همون کپشن یا متن پایین تصویر هستن.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۱ : گالری تصاویر در CSS

مقدمه

گالری تصاویر در CSS

ایجاد گالری Image در CSS

کلام آخر

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ