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>
实例演示

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-7-21
  • 王** 23.33 2019-7-17
  • 吴** 10.00 2019-7-27
  • 竺** 0.10 2019-7-18
  • 童** 5.00 2019-7-9
  • 高** 10.00 2019-7-7
  • 孙** 10.00 2019-7-29
  • 刘** 1.00 2019-7-18
  • 王** 10.00 2019-7-5
  • 陈** 20.00 2019-7-23
  • 潘** 100.00 2019-7-27
  • 庾** 1.00 2019-7-17
  • 于** 50.00 2019-7-25
  • 李** 10.00 2019-7-19
  • 钟** 20.00 2019-7-23
  • 毛** 1.00 2019-7-4
  • 许** 10.00 2019-7-13
  • 吕** 0.80 2019-7-3
  • 爱心会员 0.29 2019-7-8
  • 郭** 10.00 2019-7-2
  • 贾** 20.00 2019-7-22
  • 李** 20.00 2019-7-12
  • 张** 1.00 2019-7-4
  • 陈** 10.00 2019-7-20
  • 黄** 20.00 2019-7-18
  • 时** 0.10 2019-7-6
  • 魏** 10.00 2019-7-10
  • 李** 0.70 2019-7-7
  • 冯** 0.30 2019-7-16
  • 石** 10.00 2019-7-9
  • 陈** 20.00 2019-7-8
  • 何** 20.00 2019-7-7
  • 成** 0.10 2019-7-26
  • 赵** 10.00 2019-7-4
  • 刘** 5.00 2019-7-24

扫一扫关注

Web前端中国