zoukankan      html  css  js  c++  java
  • CSS 图片廊

    CSS 图片廊

    一、示例一

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSS教程</title>  
    <style>
    div.img {
        margin: 5px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
    }
    
    div.img:hover {
        border: 1px solid #777;
    }
    
    div.img img {
        width: 100%;
        height: auto;
    }
    
    div.desc {
        padding: 15px;
        text-align: center;
    }
    </style>
    </head>
    <body>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
          <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
          <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
          <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
          <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">这里添加图片文本描述</div>
      </div>
    </div>
    
    </body>
    </html>

    效果:

    二、示例二

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>CSS代码</title> 
    <style>
    div.img {
        border: 1px solid #ccc;
    }
    
    div.img:hover {
        border: 1px solid #777;
    }
    
    div.img img {
        width: 100%;
        height: auto;
    }
    
    div.desc {
        padding: 15px;
        text-align: center;
    }
    
    * {
        box-sizing: border-box;
    }
    
    .responsive {
        padding: 0 6px;
        float: left;
        width: 24.99999%;
    }
    
    @media only screen and (max- 700px){
        .responsive {
            width: 49.99999%;
            margin: 6px 0;
        }
    }
    
    @media only screen and (max- 500px){
        .responsive {
            width: 100%;
        }
    }
    
    .clearfix:after {
        content: "";
        display: table;
        clear: both;
    }
    </style>
    </head>
    <body>
    
    <h2 style="text-align:center">响应式图片相册</h2>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_fjords.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_forest.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_lights.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="img_mountains.jpg">
          <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    
    <div class="clearfix"></div>
    
    <div style="padding:6px;">
      
      <h4>重置浏览器大小查看效果</h4>
    </div>
    
    </body>
    </html>

    效果:

  • 相关阅读:
    哇塞 今天是数论专场呢 我要爆炸了
    树状数组模板题 hdu 1166
    [思维]Radar Scanner
    [思维]Minimum Spanning Tree
    [容斥]数对
    [概率]Lucky Coins
    [数学]特征方程求线性递推方程的通项公式
    [树状数组][2019徐州网络赛I]query
    [计算几何]Piece of Cake
    [欧拉降幂][2019南京网络赛B]super_log
  • 原文地址:https://www.cnblogs.com/lizm166/p/9355045.html
Copyright © 2011-2022 走看看