CSS 图片廊


以下是使用CSS创建图片廊:

Klematis

添加图片描述

Klematis

添加图片描述

Klematis

添加图片描述

Klematis

添加图片描述


图片廊

T以下是使用CSS创建图片廊:

实例

<html>  
<head>  
<style>  
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>



关注极客云图了解更多内容