CSS 图片库

CSS 可用来创建图片库。

图片库

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

实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <style>
  5. div.img
  6.   {
  7.   margin:3px;
  8.   border:1px solid #bebebe;
  9.   height:auto;
  10.   width:auto;
  11.   float:left;
  12.   text-align:center;
  13.   }
  14. div.img img
  15.   {
  16.   display:inline;
  17.   margin:3px;
  18.   border:1px solid #bebebe;
  19.   }
  20. div.img a:hover img
  21.   {
  22.   border:1px solid #333333;
  23.   }
  24. div.desc
  25.   {
  26.   text-align:center;
  27.   font-weight:normal;
  28.   width:150px;
  29.   font-size:12px;
  30.   margin:10px 5px 10px 5px;
  31.   }
  32. </style>
  33. </head>
  34. <body>
  35.  
  36. <div class="img">
  37.   <a target="_blank" href="/i/tulip_ballade.jpg">
  38.   <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
  39.   </a>
  40.   <div class="desc">在此处添加对图像的描述</div>
  41. </div>
  42.  
  43. <div class="img">
  44.   <a target="_blank" href="/i/tulip_flaming_club.jpg">
  45.   <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
  46.   </a>
  47.   <div class="desc">在此处添加对图像的描述</div>
  48. </div>
  49.  
  50. <div class="img">
  51.   <a target="_blank" href="/i/tulip_fringed_family.jpg">
  52.   <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
  53.   </a>
  54.   <div class="desc">在此处添加对图像的描述</div>
  55. </div>
  56.  
  57. <div class="img">
  58.   <a target="_blank" href="/i/tulip_peach_blossom.jpg">
  59.   <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
  60.   </a>
  61.   <div class="desc">在此处添加对图像的描述</div>
  62. </div>
  63.  
  64. </body>
  65. </html>