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

CSS Image Gallery




CSS có thể được sử dụng để tạo ra một thư viện hình ảnh.
Klematis
Thêm một mô tả của hình ảnh ở đây
Klematis
Thêm một mô tả của hình ảnh ở đây
Klematis
Thêm một mô tả của hình ảnh ở đây
Klematis
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>

Thử nó cho mình »
Các tin khác

Không có nhận xét nào:

Đăng nhận xét