CSS 图片廊


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

Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述
Klematis
添加图片描述

图片廊

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

实例

  1. <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>
运行一下 »