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>

尝试一下 »