css 图片廊 | 码农工具

​x
 
<!DOCTYPE html>
<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="/images/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="/images/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="/images/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="/images/klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
​
</body>
</html>
HTML