zoukankan      html  css  js  c++  java
  • 2021.5.25

    今日学习进度:CSS图片库

      第一天  第二天 第三天  第四天  第五天 
    所花时间(小时) 3  5      
    代码量(行) 200  300      
    博客量(篇) 1  1      
    了解到的知识点 CSS下拉菜单  CSS图片库      

    CSS 可用于创建图片库。

    黄色郁金香
    黄色郁金香
    红色郁金香
    红色郁金香
    花花草草
    花花草草
    花花草草
    花花草草

    图片库

    下面这个图片库是使用 CSS 创建的:

    实例

    <html>
    <head>
    <style>
    div.gallery {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
       180px;
    }
    
    div.gallery:hover {
      border: 1px solid #777;
    }
    
    div.gallery img {
       100%;
      height: auto;
    }
    
    div.desc {
      padding: 15px;
      text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div class="gallery">
      <a target="_blank" href="/i/photo/tulip-yellow.jpg">
        <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
      </a>
      <div class="desc">在此处添加图像描述</div>
    </div>
    
    <div class="gallery">
      <a target="_blank" href="img_forest.jpg">
        <img src="img_forest.jpg" alt="Forest" width="600" height="400">
      </a>
      <div class="desc">在此处添加图像描述</div>
    </div>
    
    <div class="gallery">
      <a target="_blank" href="img_lights.jpg">
        <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
      </a>
      <div class="desc">在此处添加图像描述</div>
    </div>
    
    <div class="gallery">
      <a target="_blank" href="img_mountains.jpg">
        <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div class="desc">在此处添加图像描述</div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    spring cloud-之入门技术选型的抉择
    jvm系列之-gc日志查看
    jvm系列之-参数设置
    Code completion has become quite slow under Delphi7
    Python4Delphi注意事项
    SHFileOperation删除文件夹
    开漏输出,推挽输出
    DxGrexpt中的ExcelFormat (BIFF)
    通过exe名字查询句柄,String与ShortString转换函数分析
    Netstat判断商品是否正在使用
  • 原文地址:https://www.cnblogs.com/marr/p/14905873.html
Copyright © 2011-2022 走看看