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>
  • 相关阅读:
    【python中调用shell命令使用PIPE】使用PIPE作为stdout出现假卡死的情况——将stdout重定向为输出到临时文件
    二分查找
    MongoDB安装及启动
    Python文件IO(普通文件读写)
    Python面向对象--高级(二)
    Python面向对象--高级(一)
    Python类与对象--基础
    Python生成器、装饰器
    Python函数式编程
    Python函数及参数
  • 原文地址:https://www.cnblogs.com/marr/p/14905873.html
Copyright © 2011-2022 走看看