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>
  • 相关阅读:
    Java内存模型
    BigDecimal踩过的大坑
    Java开发小技巧
    多线程同步辅助工具类
    ReentrantLock中的公平锁与非公平锁
    ReentrantLock与synchronized的区别
    推荐一个Java设计模式写的很好的博客
    线程池ThreadPoolExecutor工作原理
    支付系统架构设计转载
    linux 部署脚本
  • 原文地址:https://www.cnblogs.com/marr/p/14905873.html
Copyright © 2011-2022 走看看