CSS 图片廊

最新推荐文章于 2025-09-08 09:22:18 发布

转载最新推荐文章于 2025-09-08 09:22:18 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wybo521/blog/607326

文章标签：

#python

本文介绍了如何使用CSS创建图片廊，包括样式设置、图片链接处理及图片描述展示。

2019独角兽企业重金招聘Python工程师标准>>>

图片廊

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>

原文地址：http://www.phplearn.cn/css/css-image-gallery.html

转载于:https://my.oschina.net/wybo521/blog/607326