بایگانی تصاویر 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="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.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>

آزمایش کنید

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

کتابخانه رسیپونسیو
چگونه با استفاده از پرسش‌های رسانه‌ای CSS یک کتابخانه رسیپونسیو ایجاد کنید که در رایانه‌های رومیزی، تبلت‌ها و تلفن‌های هوشمند نیز خوب به نظر برسد.