zoukankan      html  css  js  c++  java
  • css图片的相关操作

    css图片的相关操作

    1、案例源码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0}
    body{ 95.2%;margin: 5px auto;}
    .image{border: 1px solid darkgray; auto;height: auto;float: left;text-align: center;margin: 5px;}
    .image p{font-size: 12px;margin-bottom: 4px;}
    .image a img{padding: 3px;opacity: 0.92}/*padding和margin都可以实现同样效果*/
    .image a img:hover{opacity: 1;}
    .image a:hover{background-color: coral;}
    </style>
    </head>
    <body>
    <div class="image">
    <a href="#"><img src="images/f1.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f2.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f3.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f4.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f5.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f6.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f7.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f1.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f2.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f1.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f2.jpg"/></a>
    <p>美景</p>
    </div>
    <div class="image">
    <a href="#"><img src="images/f3.jpg"/></a>
    <p>美景</p>
    </div>
    </body>
    </html>

    2、案例效果

  • 相关阅读:
    定时删除日志文件---linux定时清理日志
    Packagist 镜像使用方法--composer
    laravel 5.5 跨域问题解决方案
    linux服务器上面部署ShowDoc 安装Composer
    shell之批量新增用户脚本(http-basic-auth)
    js转义问题
    js之select三级联动
    《远见》之读书笔记
    Node.js之判断字符串中是否包含某个字符串
    微信小程序之页面传参
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7392354.html
Copyright © 2011-2022 走看看