گالری تصاویر

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

Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود
Klematis
توضیحات عکس بالا، در اینجا اضافه شود

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

مثال (گالری تصاویر در CSS)

<html>
<head>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="/klematis_big.htm">
  <img src="/klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="/klematis2_big.htm">
  <img src="/klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="/klematis3_big.htm">
  <img src="/klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="/klematis4_big.htm">
  <img src="/klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

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

آموزش های مرتبط

آموزش CSS-ساخت گالری تصاویر