آموزش ایجاد گالری تصاویر در CSS

Ratings
(0)


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

Cinque Terre
توضیح برای تصویر را اینجا قرار دهید
Forest
توضیح برای تصویر را اینجا قرار دهید
Northern Lights
توضیح برای تصویر را اینجا قرار دهید
Mountains
توضیح برای تصویر را اینجا قرار دهید

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

گالری تصویر درون مثال زیر، با استفاده از CSS ایجاد شده است:

مثال شماره 1

 <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="/img_5terre.jpg">
    <img src="/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">یک توضیح برای تصویر را اینجا قرار دهید</div>
</div>

<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">یک توضیح برای تصویر را اینجا قرار دهید</div>
</div>

<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">یک توضیح برای تصویر را اینجا قرار دهید</div>
</div>

<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">یک توضیح برای تصویر را اینجا قرار دهید</div>
</div>

</body>
</html>
امتحان کنید

مثال های بیشتر

مثال شماره 2

گالری تصاویر واکنشگرا

در این مثال می آموزیم که چگونه با استفاده از مدیاکوئری های CSS، یک گالری تصاویر واکنشگرا ایجاد کنیم که در موبایل ها و تبلت ها و رایانه های رومیزی به خوبی نمایش داده شود:

<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">یک توضیح برای تصویر را اینجا قرار دهید</div>
  </div>
</div>
امتحان کنید

 

  • بازدید: 131

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال