开发学院

您的位置:首页>教程>正文

教程正文

CSS 图片库

CSS 图片库

    CSS 可用来创建图片库。

    演示:CSS 图片库

     tulip_ballade.jpg    
    在此处添加对图像的描述
     1487672341130752.jpg    
    在此处添加对图像的描述
     1487672341130752.jpg    
    在此处添加对图像的描述
     1487672341130752.jpg    
    在此处添加对图像的描述

    图片库

    下面的图片库是由 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="/uppic/upload/image/2017/0221/1487672341130752.jpg">
      <img src="/uppic/upload/image/2017/0221/1487672341130752.jpg" alt="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    
    <div class="img">
      <a target="-blank" href="/uppic/upload/image/2017/0221/1487672341130752.jpg">
      <img src="/uppic/upload/image/2017/0221/1487672341130752.jpg" alt="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    
    <div class="img">
      <a target="-blank" href="/uppic/upload/image/2017/0221/1487672341130752.jpg">
      <img src="/uppic/upload/image/2017/0221/1487672341130752.jpg" alt="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    
    <div class="img">
      <a target="-blank" href="/uppic/upload/image/2017/0221/1487672341130752.jpg">
      <img src="/uppic/upload/image/2017/0221/1487672341130752.jpg" alt="Ballade" width="160" height="160">
      </a>
      <div class="desc">在此处添加对图像的描述</div>
    </div>
    
    </body>
    </html>