CSS Image Gallery

Chủ Nhật, 29 tháng 12, 2013

CSS Image Gallery

«Trở lại

Chương tiếp theo »

CSS có thể được sử dụng để tạo ra một thư viện hình ảnh.

Thêm một mô tả của hình ảnh ở đây

Trưng bày Hình ảnh

Bộ sưu tập hình ảnh sau đây được tạo ra với CSS:

Ví dụ

<html>

<head>

<style>

div.img

  {

  margin:5px;

  padding: 5px;

  border:1px solid #0000ff;

  height:auto;

  width:auto;

  float:left;

  text-align:center;

  }

div.img img

  {

  display:inline;

  margin:5px;

  border:1px solid #ffffff;

  }

div.img a:hover img

  {

  border:1px solid #0000ff;

  }

div.desc

  {

  text-align:center;

  font-weight:normal;

  width:120px;

  margin:5px;

  }

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