CSS 图片库

来源：09-27

CSS 图片库

CSS 可用来创建图片库。

演示：CSS 图片库

在此处添加对图像的描述

图片库

下面的图片库是由 CSS 创建的：

实例

<!doctype html><html><head><style>div.img  {  margin:3px;  border:1px solid #bebebe;  height:auto;  width:auto;  float:left;  text-align:center;  }div.img img  {  display:inline;  margin:3px;  border:1px solid #bebebe;  }div.img a:hover img  {  border:1px solid #333333;  }div.desc  {  text-align:center;  font-weight:normal;  width:150px;  font-size:12px;  margin:10px 5px 10px 5px;  }</style></head><body><div class="img">  <a target="_blank" href="/i/tulip_ballade.jpg">  <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">  </a>  <div class="desc">在此处添加对图像的描述</div></div><div class="img">  <a target="_blank" href="/i/tulip_flaming_club.jpg">  <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">  </a>  <div class="desc">在此处添加对图像的描述</div></div><div class="img">  <a target="_blank" href="/i/tulip_fringed_family.jpg">  <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">  </a>  <div class="desc">在此处添加对图像的描述</div></div><div class="img">  <a target="_blank" href="/i/tulip_peach_blossom.jpg">  <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">  </a>  <div class="desc">在此处添加对图像的描述</div></div></body></html>

亲自试一试

CSS 图片库

CSS 图片库

演示：CSS 图片库

图片库

实例

相关阅读